2017-10-03 2 views
0

Dans mon application Angular, une grille est affichée au chargement de la page. Je voudrais redessiner/rerender cette même grille quand je clique sur une rangée. Je le fais parce que cliquer sur une ligne déclenche une autre requête GET pour les données distantes afin de remplir une div à l'intérieur des lignes de la grille. Bien sûr, j'ai besoin de changer la hauteur de ligne pour la grille une fois que j'obtiens la réponse pour montrer toutes les données de la réponse, et c'est pourquoi j'ai besoin de redessiner la grille.Redessiner la grille sur l'événement

Dans mon html:

<ng-template #displayListData> 

     <ag-grid-angular #agGrid style="width: 100%" class="ag-material grid-Holdings" 
      [gridOptions]="gridOptions" 
      [rowData]="rowData" 
      [getRowHeight]="getRowHeight" 
      headerHeight="46" 
      (gridReady)="prepareGrid()" 
      [isFullWidthCell]="isFullWidthCell" 
      [doesDataFlower]="doesDataFlower" 
      [fullWidthCellRendererFramework]="getFullWidthCellRenderer()" 
      (rowClicked)="redrawGrid($event)"> 
     </ag-grid-angular> 

</ng-template> 

Dans mon composant j'ai un redrawGrid() méthode qui est mise à feu lorsque je clique sur une ligne. Dans cette méthode, j'ai essayé d'appeler setRowHeight() et resetRowHeight(), mais cela n'a pas fonctionné ... les feux de méthode, mais la grille est pas redessinée en fonction de la nouvelle hauteur passé:

redrawGrid(params: any): void { 

    //TRIED BOTH DID NOT WORK 
    params.node.setRowHeight(this.newRowHight); 
    // this.gridOptions.api.resetRowHeights(); 
} 

Voici le getRowHeight() méthode dans le même composant:

getRowHeight(params) { 
     let isDetailRow = params.node.level === 1; 
     let rowHeight: number = this.newRowHeight; 
     // my new rowHeight or 48px 
     return isDetailRow ? rowHeight : 48; 
} 

Je suis nouveau avec ag-Grid, je me demande si je suis sur ce qui complique la solution ...

Répondre

0

Après quelques essais la solution était d'appeler le setRowHeight ag-Grid sur l'enfantFlower du noeud, comme ceci:

redrawGrid(params: any): void { 
     params.node.childFlower.setRowHeight(this.globalRowCount * 34); 

     this.gridOptions.api.onRowHeightChanged(); 
} 

Mais! Mais ... la hauteur ne changera pas et la grille ne sera pas redessiner sauf si vous appelez onRowHeightChanged()

Voir « Modification de la hauteur de ligne » à https://www.ag-grid.com/javascript-grid-row-height/#gsc.tab=0