showColumn() breaks dynamic column sizing

[Brian]

Hi,

My kendoui grid sizes nicely with the parent container size, which is absolutely positioned, so when the window is resized the column elegantly resizes. This works nicely on the x axis, columns are resized appropriately. Unfortunately as soon as I call showColumn() or hideColumn() the dynamic sizing stops, and the column sizes are frozen, causing big white blank space to the right of the grid. 

This is quite a serious problem for me, as with one of my datasets, I need to show or hide columns based on the grid data returned. I need to be able to programmatically do this post-grid being populated, and would like it to continue to size dynamically.

Is there any internal method or property I can use, to force the columns back to dynamic sizing after a column is shown or hidden?

[Dimo]

Hi Brian,

There are some occasions when the Grid needs and applies a pixel width to its table elements - e.g. when a column is shown, hidden or resized. This ensures that all remaining columns preserve their widths.

In order to maintain the desired Grid resizing behavior at all times, you can do one of the following:


+ remove the pixel widths from the tables with Javascript (they are two when scrolling is used) in the columnShow and columnHide events...

http://docs.telerik.com/kendo-ui/web/grid/appearance#scrolling

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid


+ enforce the default 100% width to both tables with an !important style.

#GridID > .k-grid-header > div > table,
#GridID > .k-grid-content > table
{
   width: 100% !important;
}

Keep in mind that both workarounds will change the Grid behavior with regard to column showing, hiding and resizing, and may lead to undesired side effects.


On a side note, the provided information about the blank space on the right makes me believe that the column widths in your Grid are defined incorrectly and are too small. This causes the browser to ignore them, but as soon as the Grid calculates the set column widths and applies a pixel width to the tables, the column widths take effect. More information about the correct way to set column widths is available in the documentation:

http://docs.telerik.com/kendo-ui/web/grid/appearance#column-widths


Regards,
Dimo
Telerik

 

[Brian]

Thanks Dimo, the width 100% did the trick :)