Resizing Dev Express Docking Elements - jQuery

[iLuvYu]

I am building a web-based dashboard using DevExpress docking components, asp.net and C#. I am running into some major issues trying to get all the components(dockzone,dockpanel,widgets) to re-size correctly when the screen size is changed. When the page is loaded each table cell has a dynamic dock panel loaded to the static dockzone, then depending on the XML configuration, a gauge, a chart, queue etc will be dynamically loaded to the dock panel. The problem is when the screen size is changed. The dock zone, and dock panel stay the same size. My desired functionality is to have all the components inside each resize correctly to fit the screen. How can I achieve this on the client size using jQuery? Is there a jQuery function that will loop through each component such as the tag thus allowing me to set the width to the new size of the td? I think part of the problem is that some of the devExpress components do not allow setting width and height based on percentage.\[code\]<table runat="server" style="border-collapse: collapse; width:100%; height:100%"><tr> <td id="bold_cell1" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone1" AllowGrowing="false" ZoneUID="zone1" /></td> <td id="bold_cell2" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone2" AllowGrowing="false" ZoneUID="zone2" /></td> <td id="bold_cell3" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone3" AllowGrowing="false" ZoneUID="zone3" /></td></tr><tr> <td id="bold_cell4" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone4" AllowGrowing="false" ZoneUID="zone4" /></td> <td id="bold_cell5" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone5" AllowGrowing="false" ZoneUID="zone5" /></td> <td id="bold_cell6" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone6" AllowGrowing="false" ZoneUID="zone6" /></td></tr><tr> <td id="bold_cell7" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone7" AllowGrowing="false" ZoneUID="zone7" /></td> <td id="bold_cell8" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone8" AllowGrowing="false" ZoneUID="zone8" /></td> <td id="bold_cell9" class="boldcell" style="width:33.33%; height:33.33%"><dx:ASPxDockZone runat="server" Orientation="Fill" Height="99%" Width="100%" ID="zone9" AllowGrowing="false" ZoneUID="zone9" /></td></tr>\[/code\]I would like to find out how