Losing column widths on redirect

psenechal

Having an interesting issue that I can't seem to figure out. I have a MVC 3 website. In the PartialView is a JQuery tab object and on each tab is a dataTable...right now there are 2 tabs, so there are 2 dataTables.

The initial render of the tabs and the dataTables is perfect with the widths I specify in the dataTables call
[code]
$('.dataTable').dataTable({
"bJQueryUI": true,
"bInfo": false,
"bFilter": false,
"aoColumns": [
{ "sWidth": "15%", "sClass": "center" },
{ "sWidth": "20%", "sClass": "nowrap" },
{ "sWidth": "50%", "bSortable": false, "sClass": "nowrap" },
{ "sWidth": "15%", "bSortable": false, "sClass": "center nowrap" }
],
"sPaginationType": "full_numbers"
}).css("width", "100%");
[/code]

The edits to the tabs and the dataTables are done through a JQuery dialog and when the action completes, I re-render the PartialView to pull in the new/changed data.

When this occurs, the dataTable on the first tab still maintains the widths specified in the .dataTables call, but the dataTable on the 2nd tab ignores them completely.

The JavaScript above that sets the widths is in the PartialView. I also tried moving the JavaScript to the View instead of the PartialView and I actually lost all formatting by doing that.

I'm thinking that perhaps because it's a PartialView, the entire page isn't rendering which prevents the $(function () script from running and therefore not setting the table properties. Just seems weird that the first table renders properly.

Here's the really odd kicker...I tried to manually set the widths on the tag and tags and even that didn't work.

Any suggestions on a way to fix this behavior? Thanks for the help!

psenechal

I may have found a way around the issue...instead of using percents for the column widths, I hard-coded the pixel widths in the JavaScript and on the table/th/td tags as well. The table now seems to be holding its dimensions when the Partial re-renders.