ag-Grid Master / Detail - Row Selection

Question

Goals

I am trying to add row selection functionality which is connected between the master grid and detail grid.

When a checkbox on a master grid row is selected, I want to select all the checkboxes in the associated detail grid.
When a checkbox on a master grid row is deselected, I want to deselect all the checkboxes in the associated detail grid.
When only partial checkboxes inside of a detail grid are selected, I want the master grid row to show a partial selection icon in the checkbox.
I want to keep count of how many items were selected in all of the detail grids

Questions/Problems

All of this functionality already exists for Groups, but I cannot get it to work for Master/Detail. I've tried adding in the line that I believe should add this for Groups cellRendererParams: {checkbox: true}, but that does nothing for the detail grid.

I've also tried implementing the functionality myself, but I hit a couple of roadblocks.

I don't know how to set the partial-checkbox icon manually or if that's even possible.
I implemented the onSelectionChanged event handler for the detail grid, but inside of the function it looks like I can't access the Angular component context to update the count of selected items. Not sure how to pass in the context this.

Code that I have working so far:

When a checkbox on a master grid is selected/deselected, the checkboxes in the associated detail grid are all selected/deselected.

  public onMasterRowSelected() {
    this.gridOptions.api.forEachNode(masterRowNode => {

      if(masterRowNode.isSelected()) {
        this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.selectAll();
      } else {
        this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.forEachNode(detailRowNode => detailRowNode.setSelected(false));
      }

    });
  }

Added the onSelectionChanged() event listener for the detail grid.

constructor() {
  this.gridOptions = {
    ...
    detailCellRendererParams: {
        getDetailRowData: function(params) {
          params.successCallback(params.data.items);    // Defines where to find the detail fields out of the rowData object
        },
        detailGridOptions: {
          rowSelection: 'multiple',
          defaultColDef: {
            sortable: true
          },
          getRowNodeId: function (rowData) {
            return rowData.id;      // detail items are indexed by id field
          },
          onSelectionChanged: function (params) {
            console.log(this);      // I expected this to print out my Angular component object, but instead it prints out this.gridOptions.detailCellRendererParams.detailGridOptions
            console.log("TEST");    // I know that this function is successfully being called because this line is printed
            this.selectedItems = 0;
            params.api.forEachNode(detailRowNode => {
              if(detailRowNode.isSelected()) {
                this.selectedObs++; // I believe that this would work if I had access to the correct "this" context
              }
            });
          },
          columnDefs: [
            {headerName: 'Column 1', field: 'column1', checkboxSelection: true},
            {headerName: 'Column 2', field: 'column2'},
          ]
        }
      }
  };
}

Take a look at this Plunker from ag-Grid. Doesn't this solve your first 3 problems? — ViqMontana
@Viqas yes that does solve pretty much everything I need, but unfortunately that is for Groups and not for Master/Detail grids. My problem is that I cannot figure out how to do the same thing, but for master/detail grids. — Martin

Hoakie Hoakie · Accepted Answer · 2021-03-17T20:39:08

Here is an Angular example where you can push the parent component as a reference to the detail grid and set it as its context. Doing this allows you to register a component method as a callback for the detail grid's onRowSelected method.

https://stackblitz.com/edit/ag-grid-detailrow-selectcallback?file=src/app/app.component.ts

ag-Grid Master / Detail - Row Selection

1 Answers