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

Question

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.

Answer 1

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>