CODEWITHSUNDEEP
angulartypescriptag-gridag-grid-angular
Matt123
Matt123

Reputation: 615

How can I programmatically select multiple rows in ag-Grid?

I have an array of row ids, stored in tempSelected, and I would like to programmatically set each row in the list to selected. This is what I'm trying:

let len = tempSelected.length;
this.gridApi.forEachNode(function (node) {
  for(let i=0; i<len; i++){
    if(node.id === tempSelected[i]){
      node.setSelected(true);
    }
  }
});

At the end of this loop, I want every row in tempSelected to be selected, but right now, only the last id in the tempSelected array gets selected, and the others are not.

I have set rowSelection = 'multiple', so it shouldn't be limited to 1 selection. I have also tried changing node.setSelected(true); to node.setSelected(true, false); based on what I read here on ag-grid's website, but that didn't change the result.

How can I select multiple nodes at once?

Upvotes: 1

Views: 13442

Answers (1)

wentjun
wentjun

Reputation: 42516

I am guessing that is because you handled the highlighting of the rows on the ngOnInit lifecycle hook, or ag-grid's gridReady event. Both of the events are not suitable, as the ngOnInit hook is fired when initialisation has completed, and gridReady is triggered when the grid itself is ready (but the data is not rendered yet).

Therefore, to be safe, and assuming you want to handle the highlighting on load, you should use the firstDataRendered event instead.

For your case, you can bind the firstDataRendered event to some method, such as onFirstDataRendered. Also, do make sure that rowSelection is binded to multiple to allow multiple selections.

<ag-grid-angular
  (firstDataRendered)="onFirstDataRendered($event)"
  [rowSelection]="'multiple'"

  // other events and props
></ag-grid-angular>

And on your component.ts,

onFirstDataRendered(params) {
  let len = tempSelected.length;
  this.gridApi.forEachNode(node => {
    for (let i=0; i<len; i++) {
      if(node.id === tempSelected[i]){
        node.setSelected(true);
      }
    }
  });
}

I have created a demo over here.

Upvotes: 5

Related Questions