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?

score 2 · Answer 1 · answered Aug 18 '21 at 08:00

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);
  },
);

score 1 · Answer 2 · answered Mar 22 '20 at 17:29

1

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.

answered Mar 22 '20 at 17:29

Anuj Gupta

11
3

thanks for this, but I'm am nearly positive that the rows have not been loaded into the grid in `onGridReady` so `forEachNode` is called on an empty list. I'll have to double check, but I'm pretty sure I tried this. Thanks again. – Zeke Hernandez Mar 22 '20 at 19:37
Yes but it can be achieve by making rowData check in ag grid component means load component once rowData ready. I tried this and it works for me. – Anuj Gupta Mar 23 '20 at 06:43

score 0 · Answer 3 · answered Mar 22 '20 at 08:57

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.

score 0 · Answer 4 · answered Mar 26 '20 at 08:28

0

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

answered Mar 26 '20 at 08:28

Jay Marvin Quiambao

11
3

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

4 Answers4