Select ag-grid row programmatically on load - ag-grid

Question

Input button - Is used to send a parameter back to stored proc to
fetch new data. (In the demo you don't need to put any value in there)
Reload Button - Is used to fetch new data based on the parameter.
I need to select some rows based on some condition from the service data. Rows get selected for the first time but when I reload the service data the rows get selected and then gets unselected automatically. Please check in the below plunker.
First time - Click Reload Button - Grid Loads Fine.
Second time - Click the Reload Button - Rows gets selected and then gets unselected soon after.
#Component({
selector: "my-app",
template: `<div style="height: 100%; padding-top: 35px; box-sizing: border-box;">
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
[rowData]="rowData"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[enableColResize]="true"
[suppressRowClickSelection]="true"
[rowSelection]="rowSelection"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<input type="Text" placeholder="Param to SP"/>
<button (click)="reloadData()">ReloadData</button>
</div>`
})
export class AppComponent {
private gridApi;
private gridColumnApi;
private rowData: any[];
private columnDefs;
private defaultColDef;
private rowSelection;
constructor(private http: HttpClient) {
this.columnDefs = [
{
headerName: "Athlete",
field: "athlete",
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true
},
{
headerName: "Age",
field: "age"
},
{
headerName: "Country",
field: "country"
},
{
headerName: "Year",
field: "year"
},
{
headerName: "Date",
field: "date"
},
{
headerName: "Sport",
field: "sport"
},
{
headerName: "Gold",
field: "gold"
},
{
headerName: "Silver",
field: "silver"
},
{
headerName: "Bronze",
field: "bronze"
},
{
headerName: "Total",
field: "total"
}
];
this.defaultColDef = { width: 100 };
this.rowSelection = "multiple";
}
reloadData() {
this.http
.get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json")
.subscribe(data => {
this.rowData = data;
});
this.gridApi.forEachNode(function (node) {
node.setSelected(true);
});
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
}
Plunker - https://plnkr.co/edit/fuJ4DBc7Slp8MUTEKolJ?p=preview

Answer 1

The issue was angular was trying to bind the properties columndefs and rowdata on its own in random order, thus columndefs was getting called after and all the selected rows were getting de-selected.
The solution to the problem is don't bind columndefs and rowdata directly as a property to ag-grid instead, use gridOptions and set columndefs and rowdata using the API.
#Component({
selector: "my-app",
template: `<div style="height: 100%; padding-top: 35px; box-sizing: border-box;">
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
[gridOptions]="gridOptions"
class="ag-theme-balham"
[enableColResize]="true"
[suppressRowClickSelection]="true"
[rowSelection]="rowSelection"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<input type="Text" placeholder="Param to SP"/>
<button (click)="reloadData()">ReloadData</button>
</div>`
})
this.gridOptions.api.setColumnDefs(this.createParentColumnDefs());
this.gridOptions.api.setRowData(this.createParentRowData());