Programmatically selecting and deselecting row in ag-grid

Question

I am selecting and deselecting some rows in ag-grid based on some condition. I am doing this in onRowDataChanged event, which will be called after grid has been loaded and row data being populated. When I am trying to achieve this in onGridReady event, it is called before row data being populated. So, I did this in onRowDataChanged event.

This is my implementation of gridOptions.

ngOnInit() {
  this.gridOptions = <any> {
    rowSelection: 'multiple',
    onRowSelected: event => {
      // save selected rows in an array for additional work.
    },
    onRowDataChanged: event => {
      if (selectRows) {
         this.gridApi.selectAll();
      } else {
        this.gridApi.deSelectAll();
      }
    }
    onGridReady: params => {
      params.api.sizeColumnsToFit();
    }
  }
}

Rows are selected and deselected properly based on condition. If I want to select or deselect certain rows also, I can use following code:

this.gridApi.getRowNode(index).setSelected(true);
this.gridApi.getRowNode(index).setSelected(false);

But, I am facing one issue while selecting and deselecting rows programmatically. After this.gridApi.selectAll(); is executed and grid rows are all selected, onRowSelected event is being fired. And the code which I am doing when that event is fired is executed for each row selection and deselection.

onRowSelection event should only be fired if user select or unselect checkbox. And I am saving the selected rows in an array to send to server.

But, when I am selecting or deselecting rows during onRowDataChanged programmatically, onRowSelection is also being fired. This will cause code on that event to be executed multiple times and is giving me performance impact when I have more than 400 rows.

How can I select or deselect certain rows in ag-grid programmatically without firing onRowSelected event multiple times?

Can you add a plunker for it. It would be easier to track the flow then. — Ms.Tamil

Alexander Zbinden Alexander Zbinden · Accepted Answer · 2018-10-17T08:50:31

One possible way is to add and remove an eventListener manually to have more control in certain actions/scenarios:

https://www.ag-grid.com/javascript-grid-row-node/

addEventListener(eventType: string, listener: Function): Add an event listener. Currently only rowSelected event supported.
removeEventListener(eventType: string, listener: Function) Remove event listener.

Programmatically selecting and deselecting row in ag-grid

1 Answers