How can I pre-select Ag-Grid rows from React state?

Question

When rows are selected by the user, I save which rows are selected in some state. When the grid is rendered, I want those rows to still be selected. I've tried in onModelChanged calling setSelected on all the selected rows. However, this is not performant when lots of rows are selected. Also, there is a visible moment before the rows are selected, which is not ideal.

Is there any way I can pre-select rows before the grid is rendered?

Answer 1

Is there any way I can pre-select rows before the grid is rendered?

I assume that you are looking for configuration like editable for columns (its configurable), columns exist after gridReady event, but rows - only after firstRenderer event.

On top of that there are no properties for rows and as far as I know (and also double-checked on doc) there is no settings for that.

I mean you can configure lots of things, but the selection is out of it.

And on their examples, they are using forEach for that.

Answer 2

Yes you can preselect rows like below example.

onGridReady(params) {
  this.gridOptions.api.forEachNode(node=> node.rowIndex === 1 ? node.setSelected (true) : node.setSelected(false));
}

You can make condition based on your state.

Answer 3

You can use firstDataRendered. Then loop on each node to set the data as selected. Hope this helps you!

Answer 4

I managed to select a row by using firstDataRendered event.

gridAPI.addEventListener(
  "firstDataRendered",
  ({ api }) => {
    // Has to wait until the next tick
    setTimeout(() => {
      api.getDisplayedRowAtIndex(0).selectThisNode(true);
    }, 0);
  },
);