I've got a rather complicated grid, where I am using minScreenWidth to show/hide some columns based on screen width, but I am also manually showing/hiding other columns (grid.showColumn/grid.hideColumn) that have special uses. For example, I have a "mobile" column that is only visible on bootstrap xs - and all other columns are hidden on bootstrap xs (hidden using minScreenWidth). This "mobile" column is a template column and shows the data in that one cell in a stacked format, one line in the stack for each "normal" column, where is shows the field name: field value. Ideally, Kendo would have a maxScreenWidth, but I digress. The second column that can't be managed with minScreenWidth is a shortened version of the CardAccount column where I only show the last 4 digits if the screen size is bootstrap md (all other screen widths it is hidden).
Everything works great on Chrome and IE, but on Firefox, the grid is messed up (see screenshots for example). It appears as if there is enough room for the hidden columns but that space is still visible. If, in the console, I do a grid.refresh, the empty space collapses and the columns line up with their headers. I've tried to put in a grid.refresh in the grid dataBound (even within a setTimeout - started at 0 all the way up to 1000) and still the same. No luck.
I am hesitant to create a sample app because it is rather complex and if you have a straight-forward solution, my efforts to create a sample would be in vain.
I am using 2015.2.805
1 Answer, 1 is accepted
Empty space on the right side of the Grid may indicate the following:
- after some columns have been shown or hidden, all remaining visible columns have explicit widths, and their sum is smaller than the Grid width;
- there are columns, which are hidden with CSS, instead of via the Grid API, which is not officially supported, as hidden columns must have their respective <col> elements removed from the DOM;
grid.refresh() causes the Grid table rows to be re-rendered, so it's not relevant to the column widths.
In case you are hiding columns with CSS, please use a window.resize handler and the Grid API instead.
Regards,
Dimo
Telerik