How to Select a row in UIGrid on page loading? - angular-ui-grid

Question

I want to select a row in UI grid on page loading. I tried this code but I've got a error;
TypeError: newRawData.forEach is not a function
$scope.deviceGrid = {
data:'deviceDetails',
enableRowSelection: true,
enableRowHeaderSelection: false,
enableSelectAll: false,
multiSelect: false,
noUnselect: true,
minRowsToShow :10,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.modifyRows($scope.deviceGrid.data);
$scope.gridApi.selection.selectRow($scope.deviceGrid.data[0]);
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
var msg = 'row selected ' + row.isSelected;
console.log(row.entity.devHardwareId);
$scope.devHardwareId= row.entity.devHardwareId;
});
}};
is their another way to do this?

Answer 1

You have two options:
1) Use $timeout after setting the data to the grid
$timeout(function() {
if($scope.gridApi.selection.selectRow){
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}
});
2) Use on rows rendered from gridApi
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.core.on.rowsRendered($scope, function () {
gridApi.selection.selectRow($scope.gridOptions.data[0]);
});