Bug: Grid total column widths get out of sync

[Daniel]

Sorry if this is not the correct place to post bugs, I have noticed others posting them here and did not see a specific place on the site. 

There is an issue with the Grid where the columns in the total row become out of sync on sort. If I could get a work around while keeping the configuration the same, that would be great.

Configuration for it to happen appears to be

• Server sort enabled
• Scrolling enabled
• Resizing enabled
• Supply a number for the width in every column

The scenario is

1. Open the grid
2. Resize a column
3. Sort 

Impact

After sorting, the total column will become out of width. Resizing the column that was resized before sorting will snap the total columns back to the correct size.

An example is here:

http://dojo.telerik.com/eciCOY

Try resize the first column then sort by the first column, you will notice the total rows are larger than the actual rows.

Try resize the second column then sort by the first column, you will notice the total rows are smaller than the actual rows.

 

[Georgi]

Hi Lorna,

When all columns have pixel widths defined this can lead to unexpected behavior. Also, if the sum of column widths is less than the width of the Grid, the column widths are ignored and all columns expand. This is because when scrolling for the Grid is enabled the table-layout attribute is set to fixed In that case the browser will ignore the specified values if all columns have widths. 

You can get more detailed information about column widths in the following article:

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

A workaround in your case is to have at least one column without a specified width, so that it can adjust freely.

I modified the provided sample so one of the columns does not have specified width. After the modification the columns are aligned as expected.

• http://dojo.telerik.com/eciCOY/4

Regards,
Georgi
Progress Telerik

[Daniel]

Just following up this issue for anyone else who may run into it and not find Georgi'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 or screen size 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/eciCOY/6

 

Many thanks Georgi for the background on why the issue happens.