Kendoui如何动态地将Kendo Angular 2网格添加到面板栏?

时间:2017-09-22 19:35:02

标签: javascript kendo-ui kendo-ui-angular2

我有一个面板栏,其中包含正确显示的面板列表。问题是我需要为每个面板显示一个完全不同的网格。我怎么能这样做?

我的数据结构如下所示

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

1 个答案:

答案 0 :(得分:1)

您可以使用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>

EXAMPLE