CODEWITHSUNDEEP
angularkendo-ui-angular2
ImthiyazPH
ImthiyazPH

Reputation: 339

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

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.

Upvotes: 3

Views: 5814

Answers (1)

ImthiyazPH
ImthiyazPH

Reputation: 339

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>

Upvotes: 5

Related Questions