Search code examples
javascriptcsskendo-uikendo-grid

How to set the width of kendogrid group columns


I have been working with a KendoGrid that has two levels of group as in the image:

Kendogrid two group columns

What I need to do now is reduce the width on the group columns.

I test this code using jquery:

$(".k-group-col,.k-group-cell").css('width', 10)

...and it works but just for a moment. (Probably there is a kendo function that reset that width.)

Please help. Thanks!!


Solution

  • This issue with large group columns is most often caused by all other columns having explicit widths, which are too small, so their sum is less than the Grid's total width. In such cases the browser expands the columns.

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns

    Either leave at least one column with no width, or set larger column widths. No custom CSS will be necessary.

    Update: the group columns already have a default width, that is adequately small.