I want to show multiple groupin

babar

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

Do you mean like this RowGroup example. If not please provide details of what you want to achieve.

Kevin

babar

this is link
https://live.datatables.net/jedelezu/300/edit
this is my code
@model IEnumerable<_Reports>
<style>
.tbl-dept > tbody > tr:nth-child(1) {
color: #0c4a9c;
font-weight: 700;
}

            .bg-inverse {
                font-weight: 800 !important;
            }
        </style>
        <div class="row">
            <div class="col-12 col-xl-12">
                <div class="box">
                    <div class="box-body p-10">
                        <div class="row">
                            <div class="col-12 p-0">
                                <table id="tbl-detail_Summary" class="tbl-CategorySalesThrough table table-hover display nowrap" width="100%">
                                    <thead class="bg-inverse">
                                        <tr>
                                            <th class="bb-2 bg-inverse text-center">Group Type</th>
                                            <th class="bb-2 bg-inverse text-center">Description</th>
                                            <th class="bb-2 bg-inverse text-center">Cash</th>
                                            <th class="bb-2 bg-inverse text-center">Meezan Bank DHA </th>
                                            <th class="bb-2 bg-inverse text-center">Js Bank</th>
                                            <th class="bb-2 bg-inverse text-center">Habib Bank Limited</th>
                                            <th class="bb-2 bg-inverse text-center">Meezan Bank Muzammil</th>                  
                                            <th class="bb-2 bg-inverse text-center">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model)
                                        {
                                            <tr data-id="@item.GroupType">
                                                <td class="text-left">@Html.DisplayFor(m => item.GroupType)</td>
                                                <td class="text-left">@Html.DisplayFor(m => item.Description)</td>
                                                <td class="text-right">@Html.DisplayFor(m => item.Cash)</td>
                                                <td class="text-right">@Html.DisplayFor(m => item.BankAccount1)</td>
                                                <td class="text-right">@Html.DisplayFor(m => item.BankAccount2)</td>
                                                <td class="text-right">@Html.DisplayFor(m => item.BankAccount3)</td>
                                                <td class="text-right">@Html.DisplayFor(m => item.BankAccount4)</td>                            
                                                <td class="text-right">@Html.DisplayFor(m => item.Total)</td>
                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td class="th-total fcol1 text-left">Total</td>
                                            <td class="th-total fcol2 text-center"></td>
                                            <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.Cash)).ToString("#,##0")</td>
                                            <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount1)).ToString("#,##0")</td>
                                            <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount2)).ToString("#,##0")</td>
                                            <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount3)).ToString("#,##0")</td>
                                            <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.BankAccount4)).ToString("#,##0")</td>                            
                                            <td class="th-total fcol2 text-right">@Convert.ToDouble(Model.Sum(a => a.Total)).ToString("#,##0")</td>
                                        </tr>
                                    </tfoot>
           </table>
                            </div>
                        </div>
                        <div id="CategorySale-pie" style="width: 100%; min-height: 400px; margin: 0 auto"></div>
                    </di,v>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                function addCell(tr, content, colSpan = 1) {
                    let td = document.createElement('th');
                    td.colSpan = colSpan;
                    td.textContent = content;
                    tr.appendChild(td);
                }

                var table = $('#tbl-detail_Summary').DataTable({

                    columnDefs: [
                        { visible: false, targets: 0 } // Hide the group column
                    ],
                    'lengthChange': true,
                    'searching': false,
                    'ordering': false,
                    'info': false,
                    'autoWidth': true,
                    'scrollCollapse': true,
                    'paging': false,
                    'scrollY': '50vh',
                    'scrollX': true,
                    'sorting': false,
                    'fixedColumns': {
                        leftColumns: 1
                    },
                    rowGroup: {
                        startRender: function (rows, group) {
                            // Calculate and render row group totals
                            var cashAmountGroup = rows.data().pluck(2).reduce(function (a, b) {
                                const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                return a + doublenumber;
                            }, 0);

                            var bankAmount1Group = rows.data().pluck(3).reduce(function (a, b) {
                                const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                return a + doublenumber;
                            }, 0);

                            var bankAmount2Group = rows.data().pluck(4).reduce(function (a, b) {
                                const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                return a + doublenumber;
                            }, 0);

                            var bankAmount3Group = rows.data().pluck(5).reduce(function (a, b) {
                                const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                return a + doublenumber;
                            }, 0);

                            var bankAmount4Group = rows.data().pluck(6).reduce(function (a, b) {
                                const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                return a + doublenumber;
                            }, 0);


                            var TotalAmountGroup = rows.data().pluck(7).reduce(function (a, b) {
                                const doublenumber = Number(b.replace(/[^0-9\.]+/g, ""));
                                return a + doublenumber;
                            }, 0);

                            var tr = document.createElement('tr');
                            tr.innerHTML = '<td colspan="0" class="bg-primary"> Sub Total : ' + group + '</td>' +
                                '<td class="bg-primary text-right">' + cashAmountGroup.toLocaleString() + '</td>' +
                                '<td class="bg-primary text-right">' + bankAmount1Group.toLocaleString() + '</td>' +
                                '<td class="bg-primary text-right">' + bankAmount2Group.toLocaleString() + '</td>' +
                                '<td class="bg-primary text-right">' + bankAmount3Group.toLocaleString() + '</td>' +
                                '<td class="bg-primary text-right">' + bankAmount4Group.toLocaleString() + '</td>' +
                                '<td class="bg-primary text-right">' + TotalAmountGroup.toLocaleString() + '</td>';
                            return tr;
                        },
                        endRender: null,
                        dataSrc: 0
                    },
                });
            });
        </script>

kthorngren

Your test case seems to run correctly. Although you have more columns defined in the thead than in the Datatable using columns.

Please provide details of your questions or issues.

Kevin