Fixed column width with grouping enabled

[Antony]

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

[Tsvetina]

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

[Antony]

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

[Tsvetina]

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

[Antony]

Good morning Tsvetina,

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

Kind regards,

Antony