Datatables column header not expanding automatically

bbarani

Hi,

I have a datable inside a tab. My application has a left pane and a center pane. Center pane displays the data table and left pane is used for browsing. My left pane is collapsible, but whenever I collapse my left pane the column width in datatables is not automatically resized based on new width but when I click on any of the column headers it expands / collapse based on the total width. I am not sure how to fix this issue.

I tried using the below code but doesn't seem to work..
[code]
$(window).bind('resize', function () {
$("#"+elementId).css('width', '100%');
oTable.fnAdjustColumnSizing();
} );
[/code]
Thanks for your help!!!!

Thanks,
Barani

allan

You've bound to a window resize - do you not need to bind to whatever is collapsing the pane?

Allan

bbarani

Hi Allan,

Thanks for your response.

I modified the code to call the fnAdjustColumnSizing on all the tables present in the tabs whenver the splitter expands

Something like below..

[code]
function testExpand()
//Expand the splittter
splitter.expand("#left-pane");
var length=$("#tabstrip li").length;
//Loop through the available tabs and adjust the size of datatable columns in each tab
for(var i=2;i<=length;i++){
if($("#tabstrip-"+(i)+"table tr").length>0){
$("#tabstrip-"+(i)+"table").css("width","100%");
$("#tabstrip-"+(i)+"table").dataTable().fnAdjustColumnSizing();
}
}
}
[/code]

Now this code actually adjust the columns for just one tab but doesn't do anything for other tabs. I am not sure why this function affect other tabs. Am I missing something? Can you please help?

Thanks,
Barani

bbarani

Forgot to mention, when I click the headers, the columns are getting sized properly..

allan

That's the situation described here: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html . You need to call fnAdjustColumnSizing when the tab is made visible.

Allan