ag-grid FullWidthCellRenderer ersetzt die komplette Zeile

Question

Ich benutze AG-Grid, versuche die Zeile mit voller Breite zu implementieren..die letzte Spalte "Query" zu erweitern. Aber nur die Abfrage erscheint in der Zeile.

Jede Hilfe wäre willkommen.

export class FullWidthCellRenderer { 
     public eGui: any; 

     // gets called once before the renderer is used 
     public init(params) { 
      // create the cell 
      //this.eGui = document.createElement('div'); 
      //this.eGui.innerHTML = this.getTemplate(params); 

      let eTemp = document.createElement('div'); 
      eTemp.innerHTML = this.getTemplate(params); 
      this.eGui = eTemp.firstElementChild; 


      // set value into cell 
      //this.eValue.innerHTML = params.value; 
     }; 

     // gets called once when grid ready to insert the element 
     public getGui() { 
      return this.eGui; 
     }; 

     public getTemplate(params) { 
      // the flower row shares the same data as the parent row 
      let data = params.node.data; 

      let template = 
       '<div class="full-width-panel">' + 
       ' <div class="full-width-center">' + data.Query + 
       ' </div>' + 
       '</div>'; 

      return template; 
     }; 
    } 

Und "gridOptions", wie unten

this.gridOptions = <GridOptions>{ 
     columnDefs : [ 
      { headerName: "Name", field: "Name", width: 150}, 
      { headerName: "abc", field: "abc", width: 150 }, 
      { headerName: "def", field: "def", width: 150 }, 
      { 
       headerName: "Query", field: "Query", width: 150, 
       cellRenderer: "group", 

       //cellRendererFramework: { 
       // component: GroupComponent 
       //}, 

       cellRendererParams: { innerRenderer: queryCellRenderer } 
      } 
     ], 
     isFullWidthCell: function (rowNode) {    
      return true; 
     }, 

     fullWidthCellRenderer: FullWidthCellRenderer, 

     getRowHeight: function (params) {    
      return 200; 
     }, 
     onGridReady: function (params) { 
      // when grid is ready, expand Ireland and UK automatically 
      params.api.forEachLeafNode(function (rowNode) {     
        rowNode.expanded = true;     
      }); 
      params.api.onGroupExpandedOrCollapsed(); 
     }, 
     // return true, meaning all data can flower 

     doesDataFlower: function (dataItem) {    
      return true; 
     } 
    }; 

Answer 1

Die isFullWidthCell sollte nicht immer wahr sein. versuchen Sie dies:

isFullWidthCell: (rowNode: RowNode) => { return rowNode.level === 1; } 

Quelle: https://www.ag-grid.com/javascript-grid-master-detail/