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%.

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 length
if (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.

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.

Hi HansenC,

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:

• header cell > body cell;
• header cell < body cell;
• header text > header cell;
• cell text > header cell;
• etc.

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.

Hi HansenC,

I'm glad to see you resolved your issue. 

Thank you for sharing it with us and our community!