Editor Inline Editing Row Grouping Example

jaredgerber

I'm looking for a Row Grouping Example using the Inline editing feature.

I'm actually looking to put an input field or control in the group row -- the plan is to insert the ValForGroup input control with value (using data from first row in group) with an onchange to manually update the ValForGroup in the table ... then redisplay the table. Does that sound feasible?

It would be helpful to start with an example of Row Grouping and Inline Edit.

Group       ValForGroup        Item   ValForItem
================================================
Group1         [ 2 ]
------------------------------------------------
                               Item1       1
------------------------------------------------
                               Item2       2
------------------------------------------------
Group2         [ 3 ]
------------------------------------------------
                               Item3       1
------------------------------------------------
                               Item4       3
------------------------------------------------
                               Item5       2
------------------------------------------------

allan

DataTables doesn't really support row grouping at the moment - there is this workaround, but there isn't really any proper support for row grouping at this time I'm afraid.

Allan

jaredgerber

This worked famously for me -- I had to write my own data handler (for saving the value only), but it works really great. Now I have an editable field on the Group row for a value common to the group of records.

"drawCallback": function ( settings ) {
    var api = this.api();
    var rows = api.rows( {page:'current'} ).nodes();
    var last=null;
    var recruitscontrol = '';

    api.column(0, {page:'current'} ).data().each( function ( group, i ) {
        if ( last !== group ) {
            // alert( JSON.stringify( this.data()[i] ));
            //alert( this.data()[i]['Recruits'] );
            if ( group !== 'Personal' ) { 
                recruitscontrol = '<div style=font-weight:400;>Recruits at this level: <input size=3 type=text onchange="javascript:update_recruits('+this.data()[i]['TeamLevel']+',this.value);" name=recruits'+this.data()[i]['TeamLevel']+' id=recruits'+this.data()[i]['TeamLevel']+' value='+this.data()[i]['Recruits']+'><button class="btn" tabindex="0">&gt;</button></div>';
            }
            $(rows).eq( i ).before(
                '<tr class="group"><td style="text-align:left;"><big><strong>'+group+'</strong></big></td><td colspan="3">'+recruitscontrol+'</td></tr>'
            );
            last = group;
        } // if group
    }); // function group
}, // drawCallback