Bug: Resizing columns with specific widths less than grid width.

[Daniel]

There is an issue with the Grid

• when all columns have a width defined, and
• when the total of all column widths is less than the total width of the grid 
• will initially have the extra width distributed to them (good - not an issue)
• but when an attempt to resize a column is made, 1) every column other than the one being resized will resize to the width defined in the configuration AND 2) the column being resized will resize to take up the space left behind by the other columns becoming smaller.

Configuration for it to happen appears to be

• Resizing enabled
• Scrolling enabled
• Each column has a width defined, adding to a total width smaller than the width of the Grid's DOM element

The scenario is

1. Open the grid
2. Resize a column

Impact
Columns lose their distributed widths and the column being resized jumps away from the cursor.

An example is here:

http://dojo.telerik.com/eYUdE

Try resize the first column, you will observe the resized column growing in width and other columns losing their distributed widths. This leaves the cursor indicating an incorrect resize position.

 

Is there any chance this could be fixed / a work around be advised? Having the distributed column widths is this circumstance is good, but the behavior on resize is undesirable.

[Viktor Tachev]

Hello Lorna,

When all column have specified width it will be ignored by the browser and the columns will be resized in order to accommodate the available width. 

Furthermore, in the attached example when a column is resized the widths for the other columns is applied. Since the widths for the columns is too small this leads to unexpected behavior. 

In order for the column widths and resizing to work as expected I would recommend leaving one column without defined width so it can adjust freely. Check out the modified example below for reference.

• http://dojo.telerik.com/eYUdE/20

Furthermore, if you would like additional information on column resizing and column width you would find the resources below interesting.

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#column-resizing
• http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#column-widths

Regards,
Viktor Tachev
Progress Telerik

[Daniel]

Just following up this issue for anyone else who may run into it and not find Viktor's answer applicable for their scenario

 

If you want to be able to apply widths to every column, and do not want to worry about wether your widths match the user's machine at runtime before you render the grid, there is an easy solution.

After rendering the grid, reset the options for the grid columns to have the widths they were rendered at. It will not matter if the columns exceed the width of the grid, or are smaller.

Here is a working example of my solution.

http://dojo.telerik.com/eYUdE/21

[Jens Anders]

An old thread, but an important info for other people ending here after searching for a solution for misaligned sticky columns on grid resize:

There will be an issue with a "disappearing column" if you remove the width from one of the columns.

It is present in the example Viktor linked to  (http://dojo.telerik.com/eYUdE/20).
If you resize the pane with the grid, the 4th column will shrink until it disappears before the horizontal scroll appears.

Daniels solution is working, but be aware that calling setOptions after the initial render will have its own share of issues (refetching data for instance)..