title: ag-Grid Master / Detail - Row Selection
body: <p><strong>Goals</strong></p>
  <p>I am trying to add row selection functionality which is connected between the master grid and detail grid.</p>
  <ul>
  <li>When a checkbox on a master grid row is selected, I want to select all the checkboxes in the associated detail grid.</li>
  <li>When a checkbox on a master grid row is deselected, I want to deselect all the checkboxes in the associated detail grid.</li>
  <li>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.</li>
  <li>I want to keep count of how many items were selected in all of the detail grids</li>
  </ul>
  <hr />
  <p><strong>Questions/Problems</strong></p>
  <p>All of this functionality already exists for <a href="https://www.ag-grid.com/javascript-grid-selection/#example-groups-checkbox-selection" rel="nofollow noreferrer">Groups</a>, 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 <code>cellRendererParams: {checkbox: true}</code>, but that does nothing for the detail grid.</p>
  <p>I've also tried implementing the functionality myself, but I hit a couple of roadblocks.</p>
  <ol>
  <li>I don't know how to set the partial-checkbox icon manually or if that's even possible.</li>
  <li>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 <code>this</code>.</li>
  </ol>
  <hr />
  <p><strong>Code that I have working so far:</strong></p>
  <p>When a checkbox on a master grid is selected/deselected, the checkboxes in the associated detail grid are all selected/deselected.</p>
  <pre><code>  public onMasterRowSelected() {
      this.gridOptions.api.forEachNode(masterRowNode =&gt; {
  
        if(masterRowNode.isSelected()) {
          this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.selectAll();
        } else {
          this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.forEachNode(detailRowNode =&gt; detailRowNode.setSelected(false));
        }
  
      });
    }
  </code></pre>
  <p>Added the onSelectionChanged() event listener for the detail grid.</p>
  <pre><code>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(&quot;TEST&quot;);    // I know that this function is successfully being called because this line is printed
              this.selectedItems = 0;
              params.api.forEachNode(detailRowNode =&gt; {
                if(detailRowNode.isSelected()) {
                  this.selectedObs++; // I believe that this would work if I had access to the correct &quot;this&quot; context
                }
              });
            },
            columnDefs: [
              {headerName: 'Column 1', field: 'column1', checkboxSelection: true},
              {headerName: 'Column 2', field: 'column2'},
            ]
          }
        }
    };
  }
  </code></pre>