ag-grid treeView: a way to make children columns x-level deep editable but parents are sums of total?

Question

I've been using ng-grid with Angular and I'm trying to figure out if there's a way to make certain rows editable, which are children of a parent, but make the parents sum up the totals from the children that are x levels deep? Right now, in the docs, the only thing I can find is that you can specify the columnDef to be editable: true which will make every cell editable, which isn't exactly what I want.

The tree would look like:

Description          Total
Account              [sum of children]
    Sub-account      [sum of children]
        Line Items   [editable input]

Here is the relevant code I'm working with right now:

In component.ts file:

constructor() {
    this.defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true
    };

    this.columnDefs = [
      { field: "description", editable: true },
      { field: "fringes", editable: true },
      { field: "total", aggFunc: "sum", editable: true }
    ]
    this.rowData = [
      {
        _id: 1,
        accountHierarchy: ["1100"],
        description: "Script",
        fringes: 50,
        total: 0,
      },
      {
        _id: 2,
        accountHierarchy: ["1100", "1101"],
        description: "Writers",
        fringes: 50,
        total: 111
      },
      {
        _id: 3,
        accountHierarchy: ["1100", "1102"],
        description: "Editors",
        fringes: 50,
        total: 111
      },
      {
        _id: 5,
        accountHierarchy: ["1100", "1101", "1111"],
        description: "Supplies",
        fringes: 50,
        total: 300,
        editable: true
      },
      {
        _id: 6,
        accountHierarchy: ["1100", "1101", "1112"],
        description: "Supplies",
        fringes: 50,
        total: 231,
      },
      {
        _id: 4,
        accountHierarchy: ["1100", "1102", "1113"],
        description: "Writers",
        fringes: 50,
        total: 111
      },
      {
        _id: 7,
        accountHierarchy: ["1200"],
        description: "Cast",
        fringes: 50,
        total: 250,
      },
      {
        _id: 8,
        accountHierarchy: ["1200", "1201"],
        description: "Actors",
        fringes: 50,
        total: 5000,
      },
      {
        _id: 9,
        accountHierarchy: ["1300"],
        description: "Direction",
        fringes: 50,
        total: 500,
      },
    ];
    this.groupDefaultExpanded = -1;
    this.getDataPath = function(data) {
      return data.accountHierarchy;
    };
    this.autoGroupColumnDef = {
      headerName: "Account #",
      cellRendererParams: { suppressCount: true }
    };
  }

Here is my relevant html:

<ag-grid-angular
   #agGrid
   style="width: 100%; height: 100%;"
   id="myGrid"
   class="ag-theme-balham"
   [modules]="modules"
   [columnDefs]="columnDefs"
   [rowData]="rowData"
   [treeData]="true"
   [animateRows]="true"
   [getDataPath]="getDataPath"
   [defaultColDef]="defaultColDef"
   [rowDragManaged]="true"
   [autoGroupColumnDef]="autoGroupColumnDef"
   (gridReady)="onGridReady($event)"
   [enableRangeSelection]="true"
   [allowContextMenuWithControlKey]="true"
   [getContextMenuItems]="getContextMenuItems"
 ></ag-grid-angular>

Is this possible using the tree view?

Answer 1

You were on the right track with the columnDef editable property. Editable can either be a boolean value or a callback function (IsColumnFunc type definition). The function takes the following params:

export interface IsColumnFuncParams {
    node: RowNode;
    data: any;
    column: Column;
    colDef: ColDef;
    context: any;
    api: GridApi | null | undefined;
    columnApi: ColumnApi | null | undefined;
}

This way, you can use this available information to determine if each row is editable.

For example:

ExampleColumnDef = {
    editable: (params) => params.data?.editable
}

Cheers!