Kendo Angular2 Grid - Auto resize grid columns based on page width

3
votes

I am trying to figure out how to make Kendo Angular Grid resize the columns automatically based on the page width. Take this three column grid as an example:

  1. Column with static width of 50px
  2. Column with 40% width
  3. Column with 60% width

When the grid resizes horizontally, I want the 2nd and 3rd columns to resize and fill in the rest of the space based on the percent width.

1
angularkendo-ui-angular2
Try set class names to columns and then do width: 50px; width: calc(40%-25px); width: calc(60%-25px) accordingly in your stylesheet? – Vitalii Chmovzh

1 Answers

4
votes

Got the answer from the Progress team. Posting the solution here as it will be useful for others:

<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>