grid + resizable + scrollable issue

[Frederic]

I used the kendoGrid for years, and there's something that were never able to fix, until today I think...

When we use resizable + scrollable, we set the "width" value for all of our columns.

If the total of visible columns is less then the width of the grid, when we resize, all columns move in any random width and it's almost unusable.

Over the years, we tried, to add a fake column, we show-hide it, and we tried other sort of hack, or show-hide the first visible column, etc.

But I think that I found the reason why it doesn't work, and kendo can easily fix it.,

There are 2 tables that are sync for header and body:

<table role="grid" >...  which are defined in the "_scrollable" function.

When a resize, or show-hide occurs, a function is run to set the css "width" of that table.

But, initially, it is not set. 

That's why a hack using a columnShow-Hide sometimes fix the problem, as the width is set on these tables.

But, what we just found, is that, if we call the function _updateContentWidth on our kendoGrid after creating it, the width is correctly set on these tables, and it works as expected.

Can you confirm that this method can be used without problem, and, by the way, is possible that you fix the problem, and always call that function in that situation?

Actually, I see in the code that it is only called from inside the showColumn function.

I think that it is called if a "virtual" property is also set, but I think it should be called in other conditons also, like, when there is a specific width on ALL columns.

https://dojo.telerik.com/@foxontherock/oXocEqOh/5

[Nikolay]

Hi Frederic,

Using the _updateContentWidth() will fix the resizing problem, however, it will force the columns to have the exact widths as specified in their declaration. This is not the default Grid behavior and in case all specified column widths sum is less than the Grid width the columns will be adjusted with bigger widths filling the whole Grid width instead of making only the last visible column wider.

Calling _updateContentWidth():

Withoud calling _updateContentWidth():

Here is a Dojo where this can be examined: https://dojo.telerik.com/AdoQOboj

What approach you will go for is entirely up to you and the project needs. As for now, we recommend one of the following:

•  Set the grid-container width to be equal to or less than the combined width of all the columns. In the Dojo the combined width of the columns is 500px, so the grid-container should also have a 500px width.

• Leave one of the columns without a width. This will serve the same purpose as the above suggestion in the sense that the column without width will take up the rest of the space.

Hope this helps.

Regards,
Nikolay
Progress Telerik

[Frederic]

The real problem is when we allow to show-hide + resize columns.

For fixed grids, you are right that the best thing to do is to set some columns auto-width (without setting the width parameter).

But, when we use the grid for huge dataset, with lot of columns, we use scrolling + resizable + show-hide menu.

In that case, when the total width of all columns is less than the grid width, we have a severe issue when we try to resize columns, as you can see in my dojo on the 2nd tab.

So, we'll continue to use the _updateContentWidth hack when we initialize these grids.  

Or, we'll add an empty fake last column, always visible, empty title, without width, and with menu = false.

[Frederic]

I followed part of your suggestion, to have a column with no width that automatically fit the remaining space.

But, I also had to add some hack, to let the grid display correctly based on the colgroup tag. 

So, I had to do this:

1. add a "fake" column at the end, always visible, without width and title, menu=false to prevent hiding it.
2. add hack to always remove the inner table "width" on resize + other events.
3. hack css for last colGroup and to hide menu button on that column
4. prevent resizing last column (from that article)

Take a look at tab 3 of that new dojo, I think it works great.

https://dojo.telerik.com/@foxontherock/OYEweVat

I also still propose you to fix that case, I mean, when the grid has multiple columns that we can show/hide and/or resize, with total column width that can be smaller or larger than the table width.