How to Select a row in UIGrid on page loading?

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]);                           
                });