RowGroup: Multi-level grouping

ReneRam

I need help to achieve the following groping result:

I need to put the icon of the command in the same line of the grouping item (all the icons have the same value!)

Following is my code

    <div class="table-responsive">
        <table id="anagraficaMedici" class="table table-striped table-bordered" style="width: 100%">
        </table>
   </div>

and the javascript:

        $("#anagraficaMedici").DataTable({
            'destroy': true,
            'dataType': 'json',
            'dataSrc': 'data',
            'responsive': true,
            "ajax": urlapp + "/api/anagraficafull/" + $('#<%=mid.ClientID%>').val(),
            order: [0, 'asc'],
            rowGroup: {
                dataSrc: ['nominativo']
            },
            'columns': [
                { data: 'nominativo' },
                { data: 'nomestruttura' },
                { data: 'idanagrafica' }
            ],
            "columnDefs": [
                {
                    targets: [0],
                    visible: false
                },
                {
                    "targets": [2],
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        return '<a href="' + editp + data + ' "><ion-icon name="create-outline" size="large"></ion-icon></a>';
                    }
                }],
            dom: "Bfrtip",
            buttons: [
                {
                    extend: "copy",
                    className: "btn-sm"
                },
                {
                    extend: "csv",
                    className: "btn-sm"
                },
                {
                    extend: "excel",
                    className: "btn-sm"
                },
                {
                    extend: "pdfHtml5",
                    className: "btn-sm"
                },
                {
                    extend: "print",
                    className: "btn-sm"
                },
            ],
        });

I guest I should change something in the rowGroup section, but whatever I try I crash the grouping.

Thanks for any suggestion/help

René

allan

Hi René,

rowGroup.startRender is the option you want. With that you can control how RowGroup displays the grouping row and customise it as you need.

Allan

ReneRam

Thanks a lot. It took me a while to figure the whole thing out, but here is how I modified my code to get the expected result in case it might help others:

$("#anagraficaMedici").DataTable({
            'destroy': true,
            'dataType': 'json',
            'dataSrc': 'data',
            'responsive': true,
            "ajax": urlapp + "/api/anagraficafull/" + $('#<%=mid.ClientID%>').val(),
            order: [0, 'asc'],
            rowGroup: {
                dataSrc: ['nominativo'],
                startRender: function (rows, group, level) {
                    var grp = (rows.context[0].json).data;
                    var r = grp.findIndex(i => i.nominativo === group);
                    var idana = grp[r]['idanagrafica'];
                    return group + '<a href="' + editp + idana + ' " class="float-end"><ion-icon name="create-outline" size="large" class="text-white"></ion-icon></a>';
                }
            },
            'columns': [
                { data: 'nominativo' },
                { data: 'nomestruttura' },
                { data: 'idanagrafica' }
            ],
            "columnDefs": [
                {
                    targets: [0,2],
                    visible: false
                },
                {
                    "targets": [2],
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        return '<a href="' + editp + data + ' "><ion-icon name="create-outline" size="large"></ion-icon></a>';
                    }
                }],
            dom: "Bfrtip",
            buttons: [
                {
                    extend: "copy",
                    className: "btn-sm"
                },
                {
                    extend: "csv",
                    className: "btn-sm"
                },
                {
                    extend: "excel",
                    className: "btn-sm"
                },
                {
                    extend: "pdfHtml5",
                    className: "btn-sm"
                },
                {
                    extend: "print",
                    className: "btn-sm"
                },
            ],
        });

allan

Looks good - nice one!

Allan