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);
}
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.
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 .
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With