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

Is there a way for percentage column widths?

1 Answer 37 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Florentin
Top achievements
Rank 1
Florentin asked on 24 Mar 2021, 09:53 AM

I would like to distribute the columns on a percentage basis on the grid. Is there any way to do that?

 

I managed to do that using CSS. However, this no longer works as soon as "grouping" is used. A "colgroup" element is inserted, whose "col" elements also need a width. Is it possible to give these "col" elements a style somehow?

 

I have created a small example of this. It looks good at first sight. As soon as I arrange the columns differently or use a second grouping level, the distribution is no longer correct.

 

https://stackblitz.com/edit/angular-y8y55s

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 25 Mar 2021, 07:33 AM

Hi Florentin,

Thank you for the demo.

Indeed, the supported behavior of controlling the column widths is via their [width] properties which accept only whole numbers.

A possible approach of applying a percentage as column width is through the [headerStyle] and [style] properties:

<kendo-grid [data]="gridData" [height]="410" >
    <kendo-grid-column field="ProductName" title="Name" width="300">
    </kendo-grid-column>
    <kendo-grid-column field="Category.CategoryName" title="Category" [headerStyle]="{'width': '80%'}" [style]="{'width': '80%'}">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Price" [headerStyle]="{'width': '20%'}" [style]="{'width': '20%'}">
    </kendo-grid-column>
</kendo-grid>

But when using grouping the DOM representation of the Grid is different (please notice the additional empty column headers added to the beginning of the Grid) which is why the applied custom styles no longer provide the same visual effect. But the behavior is still expected. 

What could be done in this case is to change the percentage values when grouping. That could be achieved manually on the (groupChange) or (dataStateChange) events. Indeed, it would be considered a developer effort to determine the new percentage values that would be acceptable. 

I hope the provided information helps.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Florentin
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or