Is it possible to combine rowGroup and row.child?

C_Squared

I have a table that makes use of row.child where each row is expandable/collapse-able, but my parent rows can and will have duplicate data. Is it possible to rowGroup the multiple duplicate parent rows and still maintain the expandable/collapse-able functionality from row().child?

The following is what I've tried, but it doesn't provide the expected results:

function loadDataTable(data) {
    var table = $('#List').DataTable({
        "data": data,
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "defaultContent": ''
            },
            { "data": "SomeVal1" },
            { "data": "SomeVal2" },
            { "data": "SomeVal3" },
            { "data": "SomeVal4" },
            { "data": "SomeVal5" },
            { "data": "SomeVal6" },
            { "data": "SomeVal7" }


        ],
        "rowGroup": {
            dataSrc: 'SomeVal1'
        },
        "order": [[1, 'asc']]
    });

    $('#List tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });

};

kthorngren

It looks to be working in this example:
http://live.datatables.net/lupejito/1/edit

it doesn't provide the expected results

What are the expected results?

What happens?

For troubleshooting assistance please provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

C_Squared

Kevin,

Thanks for the response. This is a better representation of what my data looks like.
http://live.datatables.net/feviredi/1/edit

In each of the child records the only difference is the extension associated with each record.

I was hoping to find a way to group by the entire parent row (I.E. Group by Name, Position, Salary, Start Date, Office) have that grouped parent row also be expandable/collapse-able, and when expanded you'd see all the associated extensions that got grouped as a child record.

I guess technically speaking the APIs work as expected, but it's still not the result I'd like and I was hoping I might have missed an API or technique that achieves this ouput.

colin

Hi @C_Squared ,

No, that's not possible with the API I'm afraid - the grouping just produces a heading for successive records with a common trait.

One option you could do, is to pre-parse your data and create a new data set which is passed to DataTables. That dataset could have an additional hidden column for the differences, which is displayed as a child row when the row is clicked on.

Something like converting this:

        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011\/04\/25",
            "office": "Edinburgh",
            "extn": "1562"
        },
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011\/04\/25",
            "office": "Edinburgh",
            "extn": "6224"
        },

to this

        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011\/04\/25",
            "office": "Edinburgh",
            "extn": "1562,6224"
        },

Here, you would hide extn, revealing each CSV value only in the child row. That shouldn't be too hard to do if you're getting the data as an object - would be trickier if it was in the DOM.

Cheers,

Colin

C_Squared

Thanks Colin! Re-writing my SQL View was going to be the next step if I couldn't resolve this with a datatables API.