Kendo Angular2 Grid - 根据页面宽度自动调整网格列的大小
Kendo Angular2 Grid - Auto resize grid columns based on page width
我想弄清楚如何使 Kendo Angular 网格根据页面宽度自动调整列的大小。以这个三列网格为例:
- 静态宽度为 50 像素的列
- 宽度为 40% 的列
- 宽度为 60% 的列
当网格水平调整大小时,我希望第 2 列和第 3 列调整大小并根据百分比宽度填充 space 的其余部分。
Progress 团队给了答案。在这里发布解决方案,因为它对其他人有用:
<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>
我想弄清楚如何使 Kendo Angular 网格根据页面宽度自动调整列的大小。以这个三列网格为例:
- 静态宽度为 50 像素的列
- 宽度为 40% 的列
- 宽度为 60% 的列
当网格水平调整大小时,我希望第 2 列和第 3 列调整大小并根据百分比宽度填充 space 的其余部分。
Progress 团队给了答案。在这里发布解决方案,因为它对其他人有用:
<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>