I have a page with multiple webdatagrids on it, I use the javascript column resizing solution I found on this site that works fine. Due to that I don't use any width sizing for my grids. On a page with three grids in an update panel (these grids are part of a custom control I made that will display a specific grid based on setup) I have the following types: a paged grid with multiple columns, a grid with 2 columns and a grid with 1 column. When there is a partial postback (in this case by selecting another page in the paged grid, but have also tested with timer control) the multi column grid expands to 100%, but the paged grid is fine. I check the HTML and there the inline style now shows Width=100%. The only way I can make that grid not expand is to hide a column so it's a single column. What is the cause of the inline style being changed on postback and how can I stop it?
Inline style after first load: style="height: 518px; overflow: hidden; width: 235px; visibility: inherit;
Inline style after postback: style="height: 518px; overflow: hidden; width: 100%; visibility: inherit;
Hi HansenC,
I'm glad to see you resolved your issue.
Thank you for sharing it with us and our community!
Thank you for your assistance that gave me what I needed to get it working. I ended up using hidden fields to track the size after first load and set the width in code behind on postback, then the column resizing worked given it had a restricted width to work with.
The layout feature that you want is too custom. We cannot provide native functionality of the grid that can achieve that. This is caused by the fact that most of the CSS solutions are applied to normal tables. In our case the grid contains table for each of the sections: header, body, footer. Then the auto-resizing that relies on browser native calculation cannot be applied. The other option is to use JS as you have proposed, but then you have to manually handle all the possible cases:
Having a closer look, this did not fix the issue in the way that I thought it did. While the grid size no longer goes to 100% width, the cell contents will now get cut off if they are shorter than the header length. You can see this in the sample I sent you by changing the column header text from 'station' to 'city'. My goal is to have the column width the minimum size to show the data or the headers, whichever is longer, on a single line.
Edit: I also wanted to add, with the original javascript, everything works fine the first load. Except on postback something changes and adds in a 'width=100%' inline style to the control. I've compared before and after postbacks in the HTML/CSS and that's the only change I can see in the grid is that CSS attribute changed, but it's inline not from any CSS file. I even put an alert in the javascript before it does any resizing and on the postback the grid is already 100% width by the time it reaches the javascript.
That seems to have fixed the issue, thank you for your assistance. I have been using the resizer for other grids without issue but I think they may have had a width parameter set that cause it not to show up. I found the javascript from other forum postings on here, if it is something that works in general the code may want to get updated at: http://ko.infragistics.com/community/forums/t/60115.aspx and http://ko.infragistics.com/community/forums/t/24800.aspx.