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; }
The issue I'm actually having is the header text gets cut off unless I specify a width because they are longer than the data cell contents. The only solution I've found for this was through a post on this site by another one of your team members to use the method in my sample. I changed my code to use the client event to call the JS function with the same result (updated my files to show this). Is there a CSS solution so the columns will expand to the header text length without defining a width?
Hello,
Thank you for the provided code snippet and explanation!
I have checked the sample and it seems that on Timer tick the resizeDashboardGrid function is not executed as expected. This is because of the last check "resize based on header text length" I have changed the logic and now everything is working fine. You can have a look at the attached sample.
// resize based on header text lengthif (col.get_headerElement().offsetWidth != col.get_headerText().length * 8) { var newWidth = (col.get_headerText().length * 8).toString() + 'px'; col.set_width(newWidth);}
Let me know if I may be of further assistance.