Bug: Grid total column widths get out of sync

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

    Posted 23 Jul 2017 Link to this post

    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 


    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:


    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.


  2. Georgi
    Georgi avatar
    703 posts

    Posted 25 Jul 2017 Link to this post

    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:

    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.

    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 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.


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

Back to Top