Row Headers Resize

housleyp

I have just noticed that when I re-size my browser, my table will re-size dynamically but the headers never re-size. I just download version 1.8 in hopes of fixing this issue but it still happens. The following is my data table def:

[code]$('#avail_table').dataTable({
'bAutoWidth': true,
'bFilter': false,
'bInfo': false,
'bJQueryUI': true,
'bLengthChange':true,
'bPaginate': true,
'bProcess': true,
'bScrollInfinite': false,
'bSort':true,
'bSortClasses':true,
'bStateSave':false,
'aaSorting': [[0, 'desc']],
'sDom': 'rt<\'F\'lip><\'clear\'>',
'sPaginationType': 'two_button',
'sScrollX': '100%',
'sScrollXInner': '100%',
'iDisplayLength': 20,
'aLengthMenu': [[20, 40, 60, 80, 100], [20, 40, 60, 80, 100]],
'aoColumnDefs': [
{'bSortable': false, 'aTargets': [1,2,3] }
],
'fnRowCallback': function(row, data, index) { // Function will be called for every row displayed \\
$(row).unbind().bind('mouseover', function(event) {
$.each($(this).find('td'), function() {
$(this).css('background', '#9199FF');
});
}).bind('mouseout', function(event) {
$.each($(this).find('td'), function() {
$(this).css('background', '');
});
});

// Add context menu to each row \\
$(row).contextMenu({ menu: 'cm_avail_ls-0001'}, function(action, element, index) {
..... Other stuff here ......
});

return (row);
}
});[/code]

Am I missing something like an option?

housleyp

Although this issue is very strange and I do not understand why the two sections are treated differently, I have found a solution to this issue. I was using sScrollX and sScrollXInner to make the table span the entire page width wise. However, with sScrollX active, the headers no longer resize with the rows. I have since removed both sScrollX and sScrollXInner and set the tables width to 100% via css.

aaronh

This is exactly the issue that I am currently having. I will have to try and just CSS it, though that will likely cause problems when I'm using ~40 columns in some of my tables.

Hopefully this bug can get fixed.

allan

This isn't really a bug - more just an artefact of how scrolling works in DataTables. What it does is to split the body and header into separate tables (in order to do the scrolling in a cross browser manner), and uses Javascript to force the columns to align. The body can be done with relative positions but in order to force pixel perfect column alignment the header then must be pixel sizes - hence the issue you see.

So there is an API method to address this: http://datatables.net/api#fnAdjustColumnSizing . Just call fnAdjustColumnSizing whenever you want the column sizes to be recalculated and aligned. That could be in your resize callback for example.

Allan

aaronh

How/Where would we call the function so that this issue could be resolved?

allan

[code]
$(window).resize( function () {
oTable.fnAdjustColumnSizing();
} );
[/code]

assuming oTable is the reference to your DataTable instance.

Allan

medSwa

Hello, i tried using fnAdjustColumnSizing in fnInitComplete as well as $window.resize as below,
[code]
queueTable = $('#pendDataTable').dataTable( {
"sPaginationType": "full_numbers",
"bServerSide": true,
"bProcessing": true,
"aoColumns": [ null,null,null, null, null, null, null, null, {"sType": "currency"}, { "sType": "currency"}, { "sType": "currency"} ,null, {fnRender:fnCreateSelect},{fnRender:fnCreateCheckbox},{fnRender:fnCreateCheckboxForBillRemove},{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false },{ "bVisible": false }],
"sAjaxSource": "<%=request.getContextPath()%>/pend",
"type": "POST",
"bFilter": false,
"fnInitComplete": function() {
this.fnAdjustColumnSizing(true);
},
[/code]

[code]
$(window).resize( function () {
queueTable.fnAdjustColumnSizing();
} );
[/code]

when my browser is full screen the row width and header width are alright.
But when i resize my browser, the horizontal scroll appears for the rows but column headers remain fixed and doesnt resize along with the rows.
I am using the latest version 1.8.

Please help
-medSwa

allan

When you say " the horizontal scroll appears" - what horizontal scroll? You don't have x-scrolling enabled in your table, so is it the window that is scrolling? A link would be very useful.

Allan

shanimal

@allan great work-around.

In this situation, the table columns are resizing, shouldn't the headers resize automatically as well? Maybe I'm getting my terminology crossed, but this seems like a "bug" because I can't think of any reason to let the column widths get out of sync with the column heads.

Anyway, Datatables rocks!
Thank you!!!

silver77

@Allan,

first of, great work on grid, it's awesome.

I agree with shanimal, that this behaviour is seems more like a bug, or lacking feature if you will. I think you will agree that calling fnAdjustColumnSizing() on every resize event might be quite expensive operation. How about including cheaper workaround of this functionality in your future builds?!

allan

DataTables 1.9 does take steps in this direction, as you can see in this demo: http://datatables.net/beta/1.9/examples/basic_init/flexible_width.html . It isn't perfect as it doesn't work fully with scrolling as that does require a called to fnAdjustColumnSizing to get everything correctly aligned.

Allan

codemonkey65

I was able to implement the fnAdjustColumnSizing properly and it appeared to work correctly. But upon rebinding the grid, attempting to re-size the window resulted in an error. The error seems to stem from the oSettings value being null. When _fnSettingsFromNode(this[DataTable.ext.iApiIndex]) is run, the resulting oSettings is null. Therefore, anything using oSettings (i.e. _fnAdjustColumnResizing(oSettings)) fails. Any thoughts on this?