Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Programmatically select a row ag-grid + angular 2

Trying to select first row by default in ag-grid. As per ag-grid documents, I should be able to do this using NodeSelection Api(https://www.ag-grid.com/javascript-grid-selection/?framework=all#gsc.tab=0). But I am not able to get to node object at all. HTML file

<div class="pulldown panel panel-default">
          <div class="panel-heading">{{rulesSummaryTitle}}</div>
          <ag-grid-angular #agGrid   class="ag-fresh ag-bootstrap"
                           [gridOptions]="gridOptions"
                           [rowData]="rowData"
                           [columnDefs]="columnDefs"
                           [enableSorting]="true"
                           rowSelection="single"
                           [pagination]="true"
                           [suppressCellSelection]="true"
                           (gridReady)="onGridReady($event)"
                           (rowSelected)="onRowSelect($event)">
          </ag-grid-angular>
      </div>

I am calling node selection api in "onGridReady" method but errors out with error message "cant call setSelected on undefined".

public onGridReady(event: any): void {
    event.api.sizeColumnsToFit();
    this.gridOptions.api.node.setSelected(true);
  }
like image 491
Astraea Avatar asked Aug 15 '17 19:08

Astraea


People also ask

How do you select a row programmatically in Ag grid?

Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range. Remember Row Selection works with all frameworks (e.g. Angular and React) as well as plain JavaScript.

How do you select all rows in Ag grid?

Property rowSelection='multiple' is set to enable multiple row selection. Selecting multiple rows can be achieved by holding down Ctrl and mouse clicking the rows. A range of rows can be selected by using Shift .

How do you highlight rows in Ag grid?

The example below demonstrates the following: CSS class ag-row-hover has background color added to it, so when you hover over a cell, the row will be highlighted. CSS class ag-column-hover has background color added to it, so when you hover over a cell or a header, the column will be highlighted.

How do you select a column in Ag grid?

By default the order of the columns is kept in sync with the order they are shown in the grid, but this behaviour can be disabled. Select / Un-select All: Toggle to select or un-select all columns in the columns section. Select / Un-Select Column (or Group): Each column can be individually selected.


1 Answers

There isn't a node attribute on the gridOptions.api object. You will want to do something more like this:

public onGridReady(event: any): void {
  event.api.sizeColumnsToFit();
  gridOptions.api.forEachNode(node=> node.rowIndex ? 0 : node.setSelected(true))
}

This will check over each node in the data and see if the rowIndex is 0, when it is, it uses the node object to set the selected attribute

like image 110
Jarod Moser Avatar answered Sep 28 '22 00:09

Jarod Moser