Kendoui如何将Kendo Angular 2网格动态添加到面板栏?
问题描述:
我有一个面板栏,显示正确的面板列表。问题是我需要为每个面板显示完全不同的网格。我怎样才能做到这一点?Kendoui如何将Kendo Angular 2网格动态添加到面板栏?
我的数据结构看起来像这样
let gridData: any[] = [];
var objectForGrid1 = {
C1: "123456",
C2: "1234",
C4: "4567"
}
var objectForGrid2 = {
C1: "Product",
C2: "Product Description",
C3: "Date",
C4: "Date"
}
gridData.push(objectForGrid1);
gridData.push(objectForGrid2);
答
您可以使用templates来作为不同PanelBar项目的内容提供不同的网格各自的设置,如:
<kendo-panelbar>
<kendo-panelbar-item [title]="'Grid 1'" [expanded]="true">
<ng-template kendoPanelBarContent>
<kendo-grid [data]="grid1Data"></kendo-grid>
</ng-template>
</kendo-panelbar-item>
<kendo-panelbar-item [title]="'Grid 2'" [expanded]="true">
<ng-template kendoPanelBarContent>
<kendo-grid [data]="grid2Data"></kendo-grid>
</ng-template>
</kendo-panelbar-item>
</kendo-panelbar>
那么,如果我动态需要网格?直到存储过程从数据库返回后,我才会知道需要多少个网格。它可以是2个网格,可以是10个网格进入面板。我直到运行时才会知道,所以我需要一种动态添加它们的方式,比如ngFor或者其他东西 –
通过* ngFor循环访问不同网格的属性,并为每个网格创建一个PanelBar项目,例如: http: //plnkr.co/edit/zHU1s8cDTovr3go3mVGi?p=preview – topalkata
你是一个救星 –