ag-grid programmatically selecting row does not highlight

Question

Using Angular 4 (typescript), I have some code like below using ag-grid 12.0.2. All I'm trying to do is load my grid and automatically (programmatically) select the first row.

:
this.gridOptions = ....
    suppressCellSelection = true;
    rowSelection = 'single'
:

loadRowData() {
    this.rowData = [];
    // build the row data array...
    this.gridOptions.api.setRowData(this.rowData);

    let node = this.gridOptions.api.getRowNode(...);
    // console logging here shows node holds the intended row
    node.setSelected(true);
    // console logging here shows node.selected == true

    // None of these succeeded in highlighting the first row
    this.gridOptions.api.redrawRows({ rowNodes: [node] });
    this.gridOptions.api.redrawRows();
    this.gridOptions.api.refreshCells({ rowNodes: [node], force: true });

First node is selected but the row refuses to highlight in the grid. Otherwise, row selection by mouse works just fine. This code pattern is identical to the sample code here: https://www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 but it does not work.

Sorry I am not allowed to post the actual code.

Lyallpur

Answer 1

The onGridReady means the grid is ready but the data is not. Use the onFirstDataRendered method:

<ag-grid-angular (firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>

onFirstDataRendered(params) {
    this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);
}

This will automatically select the top row in the grid.

Irvingirwin

Answer 2

Since you want to select the first row on page load, you can do onething in constructor. But your gridApi, should be initialized in OnGridReady($event) method

 this.gridApi.forEachNode((node) => {
  if (node.rowIndex === 0) {
    node.setSelected(true);
 }

Aleron

Answer 3

I had a similar issue, and came to the conclusion that onGridReady() was called before the rows were loaded. Just because the grid is ready doesn't mean your rows are ready.(I'm using ag-grid community version 19) The solution is to setup your api event handlers after your data has loaded. For demonstration purposes, I'll use a simple setTimeout(), to ensure some duration of time has passed before I interact with the grid. In real life you'll want to use some callback that gets fired when your data is loaded.

My requirement was that the handler resizes the grid on window resize (not relevant to you), and that clicking or navigating to a cell highlights the entire row (relevant to you), and I also noticed that the row associated with the selected cell was not being highlighted.

  setUpGridHandlers({api}){
    setTimeout(()=>{
    api.sizeColumnsToFit();
    window.addEventListener("resize", function() {
      setTimeout(function() {
        api.sizeColumnsToFit();
      });
    });
    api.addEventListener('cellFocused',({rowIndex})=>api.getDisplayedRowAtIndex(rowIndex).setSelected(true));
  },5000);
}

Rotation

Answer 4

It's setSelected(true) that does this.

We were using MasterDetail feature, its a nested grid and on expanding a row we needed to change the selection to expanded one.

Expanding a row was handled in

detailCellRendererParams: {
  getDetailRowData: loadNestedData,
  detailGridOptions: @nestedDetailGridOptionsFor('child'),
}

and withing loadNesteddata, we get params using we can select expanded row as

params.node.parent.setSelected(true)

Hope this helps.

Emarie