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;
Hello HansenC,
Thank you for posting in our community!
I would like to ask you for a sample that demonstrate this issue. Send us as attachment small working isolated sample where we can observe the described issue, so we can continue with our investigation.
Here is a simple example of this issue. After more testing I believe it has something to do with the column resizing that is called since if I remove the resizing it does not happen, but then the header text gets cut off without it. I have tried using the initialize client event property of the grid as well with the same results. The paging in the grid is not actually working for some reason but you can see on any postback the grid gets an inline style of width: 100%.
Hello HansenC,,
I saw in your code that you have used and predefined a few of our private JS methods (that start with _) to resize the grid. I have to inform you that we do not provide support for them and also we do not advice our customers to use them. I suggest you to use the official client-side API of the WebDataGrid.
I assume that you want to resize the grid to take the space that only its cells take. You can achieve it with CSS instead of JS. There are a lot of article in internet that may show you how to achieve such behavior.
E.g.: #wdg1 { display: inline-table; }
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://es.infragistics.com/community/forums/t/60115.aspx and http://es.infragistics.com/community/forums/t/24800.aspx.