Ag-grid full width rows does not appear to work with React Components

Question

I am not sure if I am doing something wrong here or if the documentation is wrong or misleading. I am trying to use the FullWidthRowCell feature for detail panels for each row. However, it appears not to completely work as documented. As I recently made the jump from v4 to v6 of ag-grid, I thought I would ask here if I was in error before making a bug report of this.

Description:

I changed an existing data grid so that I would potentially have a details panel that expands out to show additional info in another format. I also wanted to use a react component that I would be reusing elsewhere. Currently, the panel will open and show only a blank area (where the panel should be) and produce an error message. I have used the "cellRendererFramework" successfully in my column definitions.

Documentation references:

section: Full Width Rows & Master Detail Grids

Provide a fullWidthCellRenderer, to tell the grid what cellRenderer to use when doing fullWidth rendering.

The cellRenderer can be any ag-Grid cellRenderer. Refer to Cell Rendering on how to build cellRenderers. The cellRenderer for fullWidth has one difference to normal cellRenderers, that is the parameters passed are missing the value and column information as the cellRenderer, by definition, is not tied to a particular column. Instead you should work off the data parameter, which represents the value for the entire row.

section: React Cell Rendering, Specifying a React cellRenderer

This same mechanism can be to use a React Component in the following locations:

colDef.cellRendererFramework
colDef.floatingCellRendererFramework
gridOptions.fullWidthCellRendererFramework
gridOptions.groupRowRendererFramework
gridOptions.groupRowInnerRendererFramework

gridOptions.fullWidthCellRendererFramework is a specified option!

Example setup:

Below is some of the import parts of my settings (yes its omitting col definitions and other stuff that are in my actual version).

grid options(snippet):

gridOptions = {
  doesDataFlower: (data) => { return true; }
  isFullWidthCell: function(rowNode) {
      var rowIsNestedRow = rowNode.flower;
      return rowIsNestedRow;
  },
  getRowHeight: function(params) {
    var rowIsNestedRow = params.node.flower;
    return rowIsNestedRow ? 100 : 25;
  },
  fullWidthCellRendererFramework: AppointmentDetail
}

A simple stub test component that I tried

class AppointmentDetail extends React.Component<any, any>
{
    render() {
        return <div>AppointmentDetail</div>
    }
}

However, if I use non-react method

fullWidthCellRenderer: (params) => { return "<div>Test</div>"; }

or the old method for react components (which I thought was not intended by the author to be used anymore)

fullWidthCellRenderer: reactCellRendererFactory(AppointmentDetail)

then the full row renders properly.

Warnings:

ag-Grid: you need to provide a fullWidthCellRenderer if using isFullWidthCell()

The component does kindly provide me an error that tells me what is wrong. It is just the documentation seems to indicate that this should be valid.

Version: Just in case this is needed... here is my version taken from my webpack dependencies.

"ag-grid": "^6.0.1",
"ag-grid-react": "^6.0.1",
"react": "^15.3.2",

Edit(s):

I edited gridProps to gridOptions to better illustrate that these are the grid options that I am giving ag-grid. It appears this was not clear, based on the response that told me to do exactly what I stated I did and did not work.

Added react version.

Answer 1

In 6.x the mechanism to supply components (either Angular 2 or React ones) was simplified a bit, and unified.

To supply a component in 6.x use the following syntax:

gridOptions.fullWidthCellRendererFramework = AppointmentDetail

Its a similar idea for the rest of the renderers (some user colDef.XxxRendererFramework, others use gridOptions.xxxxRendererFramework).

See https://www.ag-grid.com/javascript-grid-cell-rendering/#reactCellRendering for more information around this

Answer 2

are you using the ag-Grid React component?

i am thinking you are using ag-Grid in a React application, but not actually using the React component.

are you using AgGridReact like this:

<AgGridReact

  // listen for events with React callbacks
  onRowSelected={this.onRowSelected.bind(this)}
  onCellClicked={this.onCellClicked.bind(this)}

  // binding to properties within React State or Props
  showToolPanel={this.state.showToolPanel}
  quickFilterText={this.state.quickFilterText}
  icons={this.state.icons}

  // column definitions and row data are immutable, the grid
  // will update when these lists change
  columnDefs={this.state.columnDefs}
  rowData={this.state.rowData}

  // or provide props the old way with no binding
  rowSelection="multiple"
  enableSorting="true"
  enableFilter="true"
  rowHeight="22"
/>