2017-10-03 2 views
0

각도 어플리케이션에는 페이지로드시 렌더링되는 격자가 있습니다. 행을 클릭하면 동일한 격자를 다시 그리거나 다시 렌더링하고 싶습니다. 행을 클릭하면 그리드의 행 내부에 div를 채우는 원격 데이터에 대한 다른 GET 요청이 발생하기 때문에이 작업을 수행하고 있습니다. 물론, 응답에서 모든 데이터를 표시하는 응답을 얻으면 그리드의 행 높이를 변경해야하므로 그리드를 다시 그려야합니다. 내 HTML에서이벤트 그리드 다시 그리기

:

내가 행을 클릭하면 발사되는 방법 redrawGrid()를 가지고 내 구성 요소에서
<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> 

.) (

다음
redrawGrid(params: any): void { 

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

가 getRowHeight입니다 :이 방법에서는 전달 된 새로운 높이에 따라 나는 setRowHeight()와 resetRowHeight()를 호출 시도하지만 ... 메소드 불을 작동하지 않았다하지만 그리드는 다시 그려되지 않는다 같은 구성 요소 방법 :

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

내가 솔루션을 복잡하게 걸쳐 오전 궁금, AG-그리드와 함께 새로운 오전 ... 일부 실험 후

답변

0

솔루션에 AG-그리드의 setRowHeight 전화를했다 노드의 childFlower는 다음과 같습니다.

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

     this.gridOptions.api.onRowHeightChanged(); 
} 

하지만! 하지만 ... 높이가 변경되지 않습니다 당신이 https://www.ag-grid.com/javascript-grid-row-height/#gsc.tab=0

에서 onRowHeightChanged()

페이지의 "행 높이 변경"을 호출하지 않는 한 그리드는 다시 그리기되지 않습니다