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

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    4 posts
    Member since:
    May 2014

    Posted 24 Jul 2017 Link to this post

    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

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

    An example is here:


    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. Viktor Tachev
    Viktor Tachev avatar
    2500 posts

    Posted 26 Jul 2017 Link to this post

    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.

    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.
  3. Daniel
    Daniel avatar
    4 posts
    Member since:
    May 2014

    Posted 26 Jul 2017 Link to this post

    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.


Back to Top