This is a migrated thread and some comments may be shown as answers.
Bug: Resizing columns with specific widths less than grid width.
2 Answers 60 Views
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 24 Jul 2017, 11:26 PM

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.

2 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 26 Jul 2017, 02:55 PM
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.


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




Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Daniel
Top achievements
Rank 1
answered on 26 Jul 2017, 10:38 PM

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

Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or