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

Grid columns show/hide manually - Firefox display issues

1 Answer 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 01 Oct 2015, 04:11 AM

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

Sort by
0
Accepted
Dimo
Telerik team
answered on 05 Oct 2015, 09:02 AM
Hello Ed,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Ed
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or