angular2

ag-grid FullWidthCellRenderer is replacing the complete row  #angularjs #reactjs

  • Stack Overflow works best with JavaScript enabled
  • 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 = ‘
    ‘ + ‘

    ‘ + data.
  • I am using ag-grid, trying to implement the fullwidth row..
  • sign up log in tour help
  • Browse other questions tagged angular2 ag-grid or ask your own question .

I am using ag-grid, trying to implement the fullwidth row..to expand the last column “Query”. But only query is appearing in the row.

@ng_real_ninja: ag-grid FullWidthCellRenderer is replacing the complete row #angularjs #reactjs

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 = ‘

‘ + ‘

‘ + data.Query + ‘

‘ + ‘

‘; return template; }; }

this.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; } };

angular2