Is it possible to combine rowGroup and row.child?

Is it possible to combine rowGroup and row.child?

C_SquaredC_Squared Posts: 3Questions: 1Answers: 0

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');
        }
    });

};

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 4,809Questions: 19Answers: 1,060
    edited January 9

    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_SquaredC_Squared Posts: 3Questions: 1Answers: 0

    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.

  • colincolin Posts: 3,593Questions: 0Answers: 633
    Answer ✓

    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_SquaredC_Squared Posts: 3Questions: 1Answers: 0

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

Sign In or Register to comment.