DataTable and ajaxTabContainer

andysk

Hi... I created an ajaxTabContainer that has 4 TabPanels, and inside each panel I have a gridview. One second Tab, I have a gridview that has multiple header and beautified by DataTable.
When I generated the data while on the second tabpanel, DataTable works well (http://prntscr.com/7yq90a ), however when I generated data while on the first, third or fourth tabpanel, DataTable on second tabpanel still works, only the header become still and the width become compressed (http://prntscr.com/7yq9ha ). Strangely, If I Press Inspect Elements (I am using Firefox), the DataTables header back to normal again.

Anything that I missed?

allan

ajaxTabContainer is presumably part of a Javascript library. What library?

However, most likely the issue is that the tables have scrolling enabled and are initialised while hidden. If a table is hidden during initialisation it has no height or width and thus the columns can't be correctly aligned.

You need to use columns.adjust() when the tab is made visible to align the columns correctly. Whatever tab library you are using will likely have an event that you should listen for to trigger that code.

Allan

andysk

Hi Allan... Thanks for the reply. The Gridview is not hidden and also not scroll enabled. I have tried to do workaround by using set_ActiveTabIndex to the second tab before DataTable being called. It's work on Firefox... However not in IE, set_ActiveTabIndex is not recognized, hence the DataTable function will not be executed.

allan

I'm afraid I still don't know what library you are using, so there is very little help I can offer. Can you link to a test case showing the issue, as per the forum rules please.

Allan

andysk

Hi Allan, sorry for missed-out to inform you, I am using Ajaxtoolkit https://ajaxcontroltoolkit.codeplex.com/
Thanks

tangerine

Can you link to a test case showing the issue, as per the forum rules please.