Fixed column width with grouping enabled

5 posts, 1 answers
  1. Antony
    Antony avatar
    3 posts
    Member since:
    Jul 2016

    Posted 31 May 2018 Link to this post

    Good morning,

    I've currently got an issue with fixed column widths not being respected when I use grouping. I can see that the grid table has a table-layout value of fixed and understand from the docs why the behaviour I'm seeing is happening. When a table has a layout value of fixed, the column gets its width from the first row in the table. When grouping is enabled, the first row contains a td which spans the whole row and therefore there is no fixed width to apply to the column.

    Please see this Fiddle which demonstrates my issue.

    The first table allows fixed column widths as expected.

    The second table has a first row spanning all columns (as per a grid with grouping enabled) and disregards the column width.

    The third table is the only way I've been able to resolve the issue so far, by adding a row above the row containing the spanned column and removing all spacing in order to 'hide' it.

    Could you please advise whether there is any other way to resolve this issue? If not, could this functionality (i.e. adding a 'hidden' column) possibly be added to the Grid?

    Many thanks for your assistance.

    Antony

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 04 Jun 2018 Link to this post

    Hello Antony,

    The Grid columns width is determined by the col definitions in the colgroup rendered in the Grid table. I tested the described scenario in a Grid with grouping and the specified column widths were respected:
    https://dojo.telerik.com/oneWIroS

    Could you modify my example to reproduce the problem that you observe?

    Additionally, you can see that, in your Fiddle, adding a <colgroup> with column definitions resolves the problem in the second table:
    https://jsfiddle.net/5brnzdtu/1/

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Antony
    Antony avatar
    3 posts
    Member since:
    Jul 2016

    Posted 04 Jun 2018 in reply to Tsvetina Link to this post

    Good morning Tsvetina,

    Many thanks for the information, that's great. I can see that adding a colgroup and cols will resolve my issue.

    Could you please let me know how I can do this via the MVC API? I have had a quick look but haven't been able to find anything yet!

    Thanks,

    Antony

  4. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 05 Jun 2018 Link to this post

    Hi Antony,

    The Grid uses the colgroup with col definitions by default. You should not need to do anything special for them. You can see that assigned column widths are preserved during grouping in the Grid Overview demo.

    Try setting Width to the columns and enable scrolling  to ensure that a table-layout: fixed style is applied, which allows for having static column widths. 
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).Width(240);
            columns.Bound(c => c.ContactTitle);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.Country).Width(150);
        })
        .Scrollable()
        .....
    )


    If the problem persists on your side, please show us your Grid declaration

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Antony
    Antony avatar
    3 posts
    Member since:
    Jul 2016

    Posted 06 Jun 2018 in reply to Tsvetina Link to this post

    Good morning Tsvetina,

    That's absolutely perfect, thanks very much for your assistance.

    Kind regards,

    Antony

Back to Top