group selection & checkbox in ag-Grid

1
votes

In my Angular application I have a grid that is almost identical to the Group Selection example in the ag-Grid docs: https://www.ag-grid.com/javascript-grid-selection/#gsc.tab=0

My requirement is slightly different in that my expand button needs to both expand the row and select the row. As you see in the plunker example selection and expansion are two separate click events, but I am looking to select the row and expand that same row in one click, without having the user click on the checkbox and the expand button. I have tried doing this with css by making the checkbox transparent and placing it over the expand icon, but the click is highjacked so only one event will fire...

Is this possible in ag-Grid?

In my component by columnDefs for the column that has my checkbox and expand icon looks like so:

...
       this.gridOptions.columnDefs = [

            {
                headerName: '', width: 100, cellRenderer: 'group',
                // for parent row selection - checkboxes for parent rows
                checkboxSelection: function(params) {
                    return params.node.canFlower;
                },
                cellRendererParams: { value: ' ' }, colId: 'PlusIcon', pinned: 'left', cellClass: 'center'

            },
...
1
ag-grid

1 Answers

3
votes

Listen to the rowGroupOpened event and set the row to selected:

// inside the ag-grid tag
    (gridReady)="onGridReady($event)"

// inside the AppComponent class
  onGroupOpened(event){
    event.node.setSelected(true)
    console.log(event)

  }

plnkr example