Row Grouping and scrollCollapse

Mantorok

Hi,

I think the scrollCollapse option is not playing nice when Row Grouping is implemented in a DataTable. When the table contents are filtered to less then the ScrollY figure the DataTable doesn't use all the available height. It looks like its not taking into consideration the inserted rows used for grouping.

Here's a test case: http://jsfiddle.net/Hq7vd/

Try entering DI into the Search textbox and it will only display 1 of the 2 rows even though there's plenty of room to display both rows. You need to use the vertical scrollbar to see the 2nd row.

Is there a way DataTables can be forced to show as many rows as possible within the ScrollY limit and still have scrollCollapse turned on?

Thanks,
Mantorok

CrazyYann

Hi,

i have the same problem. See there

Thanks.

Izrun

I had this same problem and came up with a solution that works great for me. It will automatically increase the table when a group row is added until it reaches the maximum defined by "scrollY".

I haven't done extensive testing of this, but it appears to work on all browsers and is compatible with searching and sorting and multiple tables on a page. You need to have >= rev 1.10.2 of DataTables because I use the settings() function. Also, I haven't messed with options where scrollY is not just in pixels. I'm sure you could change it to make it work but I didn't need to so I didn't take the time.

BTW, I'm new to DataTables so if anyone knows a better way to do what I'm doing (or if what I'm doing is bad) please let me know.

All you need to do is put the following in for your column grouping.

api.column(0, {page:'current'} ).data().each( function ( group, i ) {
    if ( last !== group ) {
        var thisRow = $(rows).eq( i ).before(
            '<tr class="group"><td colspan="7">'+group+'</td></tr>'
        );

        var maxHeight = api.tables().settings()[0]['oScroll']['sY'].replace(/\D/g,'');
        var newHeight = $(api.tables().containers()0]).find(".dataTables_scrollBody").height() + $(thisRow).height()
                        
        if (newHeight < maxHeight) {
            $(api.tables().containers()0]).find(".dataTables_scrollBody").height(newHeight)
        }

        last = group;
    }
} );

Here is are the above examples with the expanding code put in:

• Mantorok
• CrazyYann

-=Izrun

CrazyYann

Perfect thanks a lot.