How to make detail gridrows selectable in ag-grid

Question

I have an ag-grid in master/detail form. I am trying to find a way to make rows in the detail view selectable so I can remove the selected detail row.

In the detailGridOptions, I tried to set the defaultColDef rowSelection to single. That does not seem to work. Unfortunately on the documentation of ag-grid I cannot find a reference that shows what you can define in defaultColDef. There are just some examples for specific use cases but no overall view. Or I am just failing to find it.

My grid definition in the component:

this.columnDefs = [
      { headerName: 'ID', field: 'batchID', cellRenderer: 'agGroupCellRenderer' },
      { headerName: 'Erstelldatum', field: 'createDateString' },
      { headerName: 'Lagerort', field: 'storedAt' },
      { headerName: 'Materialnummer', field: 'matNumber' }
    ];

    this.detailCellRendererParams = {
      detailGridOptions: {
        columnDefs: [
          { headerName: "UnitID", field: 'unitID' },
          { headerName: "Eingangsdatum", field: 'entryDateString' },
          { headerName: "Ausfalldatum", field: 'failureDateString' }
        ],
        defaultColDef: {
          rowSelection: 'single',
          filter: true
        },
        onFirstDataRendered(params) {
          params.api.sizeColumnsToFit();
        }
      },
      getDetailRowData: function (params) {
        params.successCallback(params.data.units)
      }
    }

And the html:

 <div class="row mt-3">
        <div class="col">
            <ag-grid-angular class="ag-theme-balham" style="width: 100%; height: 750px;" [rowData]="rowData$ | async"
                [columnDefs]="columnDefs" [rowSelection]="rowSelection" [masterDetail]="true"
                [detailCellRendererParams]="detailCellRendererParams" (gridReady)="onGridReady($event)"
                (selectionChanged)="onSelectionChanged($event)">
            </ag-grid-angular>
        </div>
    </div>

I put in the filter:true to check if it works at all and it does. So I am guessing that rowSelection: 'single' is wrong. I also tried selectable: true.

Here is a screenshot of the grid:

master/detail ag-grid

I want to be able to select the rows that are shown inside the inner grid. The ones that have a UnitID. I will try to create a stackblitz. Might take a while though, since I have never done that before.

Could you reproduce your issue on StackBlitz please. There's not enough information/it's unclear what exactly your problem is. — ViqMontana
@Viqas I have added a screenshot which might make it clearer. I will try to make a stackblitz, too. — Sentinel
Nevermind the stackblitz. The master/detail feature is an enterprise function. I don't think I can put that in a stackblitz. But I hope the screenshot makes it clear. — Sentinel

ViqMontana ViqMontana · Accepted Answer · 2019-06-19T11:11:10

You need to have the property rowSelection: 'single' on detailGridOptions instead of on defaultColDef. Once you have that, you can have a button which will get you the currently selected nodes, using the detailGridInfo.

So if you add a button:

<button (click)="deleteSelectedRow()">Delete Selected Detail</button>

Which calls the function:

deleteSelectedRow() {
    this.gridApi.forEachDetailGridInfo(function(detailGridApi) {
      console.log(detailGridApi.api.getSelectedRows()[0])
    });
  }

Then that will get you your selected row in detail.

Take a look at this working plunker.

How to make detail gridrows selectable in ag-grid

1 Answers