Ag-grid editing group in data-tree server side mode

Question

PROBLEM:

In Server Side Data-Tree mode cells in group rows is not editable. I based on this documentation for building the grid - https://www.ag-grid.com/javascript-grid-server-side-model-tree-data .Example:

https://plnkr.co/edit/t1uZ4V3cUs6IHZDsPKYI?p=preview

In this example group rows is not editable, in spite of all columns have 'editable: true' properties

this.columnDefs = [
              { field: "jobTitle", editable: true },
              { field: "employmentType", editable: true }
        ];
        this.defaultColDef = {
          width: 240,
          resizable: true
        };
        this.autoGroupColumnDef = {
          cellRendererParams: {
            innerRenderer: function(params) {
              return params.data.employeeName;
            }
          }
        };
        this.rowModelType = "serverSide";
        this.isServerSideGroup = function(dataItem) {
          return dataItem.group;
        };
        this.getServerSideGroupKey = function(dataItem) {
          return dataItem.employeeId;
        };

Expectation:

All rows and cells (except Group column) should be editable. Example (usual data-tree WITH OUT server side model):

https://plnkr.co/edit/HCmkdUJ7VPPoug7pOct3?p=preview

 this.columnDefs = [{ field: "jobTitle", editable: true }, { field: "employmentType", editable: true }];

Pay attention in both cases all columns have 'editable: true'properties and in server side it's not working

Question:

What should i do to have a possibilities to edit all rows (even in group rows)?

kamil-kubicki kamil-kubicki · Accepted Answer · 2019-12-05T11:03:26

You were almost there - what is missing is cellEditor definition for each editable cell, as in example below:

{ field: "jobTitle", editable: true, cellEditor: 'agLargeTextCellEditor' }

Please remember also, that you won't be able to modify directly top level values (grouping is used for), as this will allow you to edit exclusively child nodes of the group.

The list of available ag-grid editors for cells inline modifications:

agTextCellEditor - applied by default simple text editor
agPopupTextCellEditor - 'agTextCellEditor' w rapped inpopup
agLargeTextCellEditor - text popup that for multi-line text
agSelectCellEditor - dropdown editor
agPopupSelectCellEditor - 'agSelectCellEditor 'wrapped in popup
agRichSelectCellEditor - rich select popup that uses row virtualisation, availabe in ag-Grid-Enterprise version

Editing grouped cells is available from version Version 7.2.x of ag-grid. Property enableGroupEdit needs to be set to true to switch on the feature.

<ag-grid-angular
      ...
      [enableGroupEdit] = "true"
      ...
    ></ag-grid-angular>

Ag-grid editing group in data-tree server side mode

1 Answers