Is there a way for percentage column widths?

[Florentin]

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

[Martin Bechev]

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