Programmatically select a row ag-grid + angular 2
Found solution, problem was with "onGridReady" function being called well before row data being populated from Observables. So there were actually no rows that select statement could select.
import { Component } from '@angular/core';
import {Observable} from "rxjs/Observable";
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData"
(gridReady)="onReady($event)"
[columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData2"
(gridReady)="onReady($event)"
[columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[gridOptions]="gridOptions"
[rowData]="rowData3"
(gridReady)="onReady($event)"
(rowDataChanged)="onRowDataChanged()"
[columnDefs]="columnDefs">
</ag-grid-angular>
`
})
export class AppComponent {
columnDefs;
rowData;
rowData2;
rowData3;
constructor() {
this.gridOptions = {
rowData: this.rowData3
};
console.log("in here");
console.log("in here");
console.log("in here");
this.columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
this.rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
]
let val = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
let res : Observable<any> = Observable.create(observer => {
setTimeout(()=>{
observer.next(val);
},1);
});
res.subscribe(
resposne => {
this.rowData2 = resposne;
});
let res1 : Observable<any> = Observable.create(observer => {
setTimeout(()=>{
observer.next(val);
},2000);
});
res1.subscribe(
resposne => {
this.rowData3 = resposne;
});
}
/**
* Select the first row as default...
*/
public onRowDataChanged(): void {
this.gridOptions.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
}
private onReady(params) {
params.api.sizeColumnsToFit();
params.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
}
}
https://plnkr.co/edit/PSKnSjAo6omDAo5bjm1J.
Added plunker with three ag-grid. First grid has predefined rowdata values, second grid has rowdata is being populated from Observables but with very less latency, third grid has row data values being populated from observables with higher latency. In case of first and second "onGridReady" function gets called and first row get selected, but in case of third grid we have to provide select row statement on to "rowDataChanged" event for row to be 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