Missing icon on Last level of Row-Group

VishalJobraj

I have implemented a multilevel Row Group with subtotals.

The problem I have is that the Last level of the Row Grouping lacks the icon to indicate whether the row is expanded or collapsed, as seen below:

How can I make the icon appear on the last Row Grouping as well?

Please bear in mind that I had to cover up some of the sensitive data from the data table.

I am working on a fiddle with working code and will post it as soon as possible.

JS code, where 'report-table' is the Id of the datatable:

$(document).ready(function () {

        var collapsedGroups = {};
        var groupParent = [];

        var table = $('#report-table').DataTable({
            order: [[0, 'asc'], [1, 'asc'], [2, 'asc'], [3, 'asc']],
            columnDefs: [{
                targets: [0, 1, 2, 3],
                visible: false
            }],
            rowGroup: {
                dataSrc: [0, 1, 2, 3],
                startRender: function (rows, group, level) {

                    var level0;
                    groupParent[level] = group;

                    var usageAvg = rows
                        .data()
                        .pluck(6)
                        .reduce(function (a, b) {
                            return parseFloat(a) + parseFloat(b);
                        }, 0);

                    var percentageAvg = rows
                        .data()
                        .pluck(7)
                        .reduce(function (a, b) {
                            return parseFloat(a) + parseFloat(b);
                        }, 0);


                    groupParent[level] = group;

                    var groupAll = '';
                    for (var i = 0; i < level; i++) { groupAll += groupParent[i]; if (collapsedGroups[groupAll]) { return; } }
                    groupAll += group;

                    if ((typeof (collapsedGroups[groupAll]) == 'undefined') || (collapsedGroups[groupAll] === null)) { collapsedGroups[groupAll] = false; } //True = Start collapsed. False = Start expanded.

                    var collapsed = !!collapsedGroups[groupAll];

                    rows.nodes().each(function (r) {
                        r.style.display = collapsed ? 'none' : '';
                    });

                    var backgroundColor = '';

                    switch (level) {
                        case 0:
                            backgroundColor = 'style="background-color:darkred"';
                            break;
                        case 1:
                            backgroundColor = 'style="background-color:orangered"';
                            break;
                        case 2:
                            backgroundColor = 'style="background-color:darkorange"';
                            break;
                        case 3:
                            backgroundColor = 'style="background-color:lightcoral"';
                            break;
                    }

                    var icon = '<span data-feather="plus-circle"></span>';
                    feather.replace()
                    if(collapsed == true)
                    {
                        icon = '<span data-feather="plus-circle"></span>'
                    }
                    else
                    {
                        icon = '<span data-feather="minus-circle"></span>'
                    }

                    return $('<tr/>')
                        .append('<td colspan="2"' + backgroundColor + '><div style="color:white">' + icon +' '+ group + '</div></td><td colspan="1"' + backgroundColor + '><div style="color:white">' + usageAvg.toFixed(2) + '</div></td><td colspan="1"' + backgroundColor + '><div style="color:white">' + percentageAvg.toFixed(2) + '</div></td>')
                        .attr('data-name', groupAll)
                        .toggleClass('collapsed', collapsed);
                }
            },
            paging: false,
            responsive: true
        });

        $('#report-table tbody').on('click', 'tr.dtrg-start', function () {
            var name = $(this).data('name');
            console.log(name);
            collapsedGroups[name] = !collapsedGroups[name];
            table.draw(false);
        });

    });

VishalJobraj

Hi guys, I have managed to resolve my issue and will mark this post as Answered.