This is a migrated thread and some comments may be shown as answers.

Fixed column width with grouping enabled

4 Answers 80 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Antony
Top achievements
Rank 1
Antony asked on 31 May 2018, 10:21 AM

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

4 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 04 Jun 2018, 08:12 AM
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.
0
Antony
Top achievements
Rank 1
answered on 04 Jun 2018, 08:20 AM

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

0
Accepted
Tsvetina
Telerik team
answered on 05 Jun 2018, 03:10 PM
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.
0
Antony
Top achievements
Rank 1
answered on 06 Jun 2018, 07:49 AM

Good morning Tsvetina,

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

Kind regards,

Antony

Tags
Grid
Asked by
Antony
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Antony
Top achievements
Rank 1
Share this question
or