Kendo Grid columnShow / Hide does not redistibute widths

0
votes

My example illustrates my problem (with comments): http://dojo.telerik.com/eyIHi

Problem explained here again:

  • I have a Kendo grid, the grid's width is dynamic (based on browser window width).
  • The grid has 4 columns with width 50px only to illustrate the problem better! YET, the column widths are initially assigned differently so that they fill the grid's width!
  • The first columns is hidden by default
  • When running the example, the columns initially (even though only 50px) are spread out to use the complete width of the window (be sure to have a window size of more than 200px so that my sample works for you)
  • After the grid has been initialized I run showColumn('ContactName') to unhide the first column
  • Now because the columns combined width is less than the window width they should be spread out evenly again, but they are not.

Here is my code which is executed when the grid is built:

dataBound: function(e){
    e.sender.showColumn('ContactName');
},

I did not find a function to redistribute them like the grid does in the beginning (API here: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid)

2
javascriptdojotelerikgridkendo-grid

2 Answers

0
votes

If you want all your columns to distribute evenly across the grid width, don't specify a width for any of them. It does not sound like you want the columns to be 50px at all.

http://dojo.telerik.com/@Stephen/aRUGi

Also, the Kendo documentation explains why your 50px columns stretch to fill the entire grid despite explicitly setting them the 50px: http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#column-widths. The paragraphs starting at "When all columns have pixel widths,..." is particularly relevent.

0
votes

Auto fitting all columns after the change, then removing the set width from the grid reimposes their ability to strech relatively!

http://dojo.telerik.com/UyEfa

for(i=0;i<=self.sender.columns.length;i++){
    self.sender.autoFitColumn(i);
}
self.sender.element.find('table[role="grid"]').removeAttr('style');