Can we use Multi-Level grouping with server side processing?

Sok Virak

Hi.
i got an error while I apply rowGroup: endrender with server side processing.
Here my code:

$('#tblReport').DataTable({
            lengthMenu: [
                [10, 20, 50, 100,-1],
                [10, 20, 50, 100,"All"]
            ],
            "processing": true,
            "serverSide": true,
            "orderable": false,
            "searchable": false,
            "searchDelay": 5000,
            "ajax": {
                "url": "/SaleItemDetail/POSTSaleItemDetail",
                "type": "POST",
                "datatype": "json",
                "data": model,
                "error": function (jqXHR, textStatus, errorThrown) {
                    $('#resultTable_processing').hide();
                    self.showTable(false);
                    app.warning("Please, Try again later or reload the Page.", 5000);
                    console.log(errorThrown + "\r\n" + jqXHR.status + "\r\n" + textStatus);
                }
            },            
            "columns": [
                //{ "data": "No", "autoWidth": true },
                { "data": "Company", "autoWidth": true },
                { "data": "Outlets", "autoWidth": true },
                { "data": "DateString", "autoWidth": true },
                { "data": "Group", "autoWidth": true },
                { "data": "Category", "autoWidth": true },
                { "data": "ItemCode", "autoWidth": true },
                { "data": "English", "autoWidth": true },
                { "data": "Khmer", "autoWidth": true },
                { "data": "Size", "autoWidth": true },
                {
                    "data": "Qty",
                    "render": function (value) {
                        return app.currency(value)
                    },
                    "autoWidth": true,
                    "className": "text-right"
                },
                {
                    "data": "Price",
                    "render": function (value) {
                        return app.currency(value)
                    },
                    "autoWidth": true,
                    "className": "text-right"
                },
                {
                    "data": "Amount",
                    "render": function (value) {
                        return app.currency(value)
                    },
                    "autoWidth": true,
                    "className": "text-right"
                },
                {
                    "data": "Discount",
                    "render": function (value) {
                        return app.currency(value)
                    },
                    "autoWidth": true,
                    "className": "text-right"
                },
                {
                    "data": "AfterDiscount",
                    "render": function (value) {
                        return app.currency(value)
                    },
                    "autoWidth": true,
                    "className": "text-right"
                },
                { "data": "ReasonCode", "autoWidth": true },
                { "data": "Source", "autoWidth": true },
                { "data": "Channel", "autoWidth": true },
                { "data": "CustomerType", "autoWidth": true }
            ],   
            rowgroup: {
                startrender: null,
                endrender: function (rows, group) {
                    var grouping = store;
                    var found = false;
                    var tr = $('<tr/>');
                    for (var i = 0; i < $(`${domstr.table} thead th`).length + 1; i++) {
                        console.log(i)
                        var x = grouping.find(function (r) { return r.index == i; });
                        console.log(x)
                        if (x == null) {
                            if (found) tr.append('<td>&nbsp;</td>');
                        } else {
                            if (!found) {
                                tr.append('<td colspan="8" align="right"><b>' + group + ' - total</b></td>');
                                found = true;
                            }
                            tr.append('<td align= "right"><b>' + app.currency(x.func(rows, x.index)) + '</b></td>');
                        }
                    }
                    return tr;
                },
                datasrc: [1, 2, 4]
            },
        });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Yes, that should be possible. You would want to make sure you order by columns 1, 2 and 4 though (order).

Also note that the initialisation options are case sensitive. For example datasrc should be dataSrc and endrender should be endRender.

The full list of options is available here.

Allan