Kendoui Comment ajouter dynamiquement des grilles Kendo Angular 2 à une barre de panneau?

Question

J'ai une barre de panneau avec une liste de panneaux qui montrent correctement. Le problème est que je dois montrer une grille totalement différente pour chaque panneau. Comment puis je faire ça?

Ma structure de données se présente comme suit

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

Vous pouvez utiliser templates pour fournir différents Grids avec leurs paramètres respectifs en tant que contenu pour les différents éléments de PanelBar, par exemple:

<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