Display multiline text in cell that can expand collapse in Ag Grid?

Question

Is there any way to create multi-row text in AG Grid and that could be expand/collapse feature (similar to grouped row).

Example of what I am looking for can be found in RapidMiner - Statistics feature:

Answer 1

This is possible. In my example, I have defined dataRenderer to handle custom cell renderig.

An extra column 'Toggle' is used to fire the event that will change content of chosen cell and apply row height using function toggleRenderer.

{
  headerName: "Toggle",
  field: " ",
  hide: false,
  width: 80,
  cellRenderer: toggleRenderer //action button for expand/collapse action
}

Custom button display in the grid:

  function toggleRenderer(params) {
    params.$scope.toggleRow = toggleRow;
    return '<button ng-click="toggleRow()"> > </button>';
  }

Main collapse/expand action:

function toggleRow() {
    //get current row
    var row = this.rowNode; 

    //toggle selection
    var selected = !row.selected;

    //change the row height regarding if row is selected or not
    var height = selected ? 75 : 25; 

    //apply changes
    row.setRowHeight(height);
    row.setSelected(selected);

    var params = {
      force: true,
      rowNodes: [row]
    };

    //update display
    $scope.gridOptions.api.refreshCells(params);
    $scope.gridOptions.api.onRowHeightChanged();
  }

Important part of the code, responsible for multiline display:

{
   ...
   cellRenderer: dataRenderer
}

function dataRenderer(params) {
    if (params.node.selected) {
      //you can place here any display (chart or other) that will be shown on expand
      return (
        "<div>Row1: " +
        params.data.price +
        ...
        "<div>RowXX:" +
        params.data.price +
        "</div>"
      );
    } else {
      return params.data.price;
    }
}

Here is the working example