This is a migrated thread and some comments may be shown as answers.

showColumn() breaks dynamic column sizing

2 Answers 525 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 14 Nov 2014, 05:35 AM
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?


2 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 17 Nov 2014, 02:57 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 18 Nov 2014, 05:12 AM
Thanks Dimo, the width 100% did the trick :)
Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Brian
Top achievements
Rank 1
Share this question
or