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

Question

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

   

       

           

              

              

           

       

    

 

 

我的数据结构是这样的

 

        

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

Answer 1

您可以使用templates 为不同的 Grids 提供各自的设置作为不同 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