Control all column widths

5 posts, 0 answers
  1. Gerry
    Gerry avatar
    33 posts
    Member since:
    May 2017

    Posted 12 Jun 2017 Link to this post

    I have several tables that have different numbers of columns, but I want to columns widths of the tables to be the same.

    I have achieved this by setting all the columns widths, but with one empty column at the end (without a column width) - see attached image. What is the best way to do this, without having to add any empty columns?

  2.
  3. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 14 Jun 2017 Link to this post

    Hi Gerry,

    When all columns have pixel widths, if the sum is less than the width of the Grid, the column widths are ignored and and all columns expand.

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

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



    Regards,
    Georgi
    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.
  5. Gerry
    Gerry avatar
    33 posts
    Member since:
    May 2017

    Posted 15 Jun 2017 Link to this post

    Let's say I wanted the (last) variable-with column to be hidden, or less noticeable, is there an easy way to do that?
  7. Gerry
    Gerry avatar
    33 posts
    Member since:
    May 2017

    Posted 15 Jun 2017 in reply to Gerry Link to this post

    I have tried 

    #mygridid > table /* header + data table */ {
        table-layout: fixed;
    }

    but that doesn't work - the table is still set to width: 100%. If use the browser dev tools to remove the 100% width it looks like in the attached image.

  8.
  9. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 19 Jun 2017 Link to this post

    Hi Gerry,

    It is possible to set the width of the grid element dynamically when it is bound to its data. You simply set the sum of all column widths as the width of the grid in the event handler of dataBound event.

    The following dojo is illustrates a situation similar to the one you have:



    Regards,
    Georgi
    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.
Back to Top