Angular ngGrid select row on page load

angular-ui, angularjs, angularjs-scope, javascript, ng-grid

Solution

For me, none of the answers worked (i use ng-grid v2.0.14).

The selected answer works probably because data is either not big or is not loaded through an ajax call otherwise you can't select a row "before" ngGridEventData since the event is fired when the rows are rendered and you can't select a row if it hasn't been rendered yet. Should any of these conditions fail or the grid take too much time than usual to render then the selected answer will not work.

I have a scrollable grid with about 2000 rows, but I haven't any restriction on listening to the ngGridEventData so i worked on that, although it has a weird behavior for me: The ngGridEventData fires exactly 4 times for me, twice before data arrives from the ajax call and twice after. I used this jquery plugin http://benalman.com/projects/jquery-throttle-debounce-plugin/ (it can be used even without jQuery though) to make it so that the function was called only once.

And since this is not enough, the "selectRow/selectItem" function triggers the "afterSelectionChange" event twice (the first time with the wrong row, for some reason). This is what i had to do to make sure that the event is fired only once and only for the correct row.

This is what happens for me:

- ngGridEventData (no afterSelectionChange triggers, probably because there are no rendered rows)

- ngGridEventData (no afterSelectionChange triggers, probably because there are no rendered rows)

- Ajax call to retrieve data

- delay (probably rendering)

- ngGridEventData

- afterSelectionChange x2

- ngGridEventData

- afterSelectionChange x2

So i had to use this:

- debounce to make sure the function is called only once during the delay (the timeout is low since the calls are close to one another in pair, and the rendered rows checks makes sure the first call is not the one being used)

- check that the rendered rows are > 0 to make sure the first 2 events are not triggered on slow sistems (or slow connection) where the delay and data load might take some time

- Optionally use rowItem.selected to avoid another "bug" since the afterSelectionChange event fires twice even when selecting a row (once for the row being unselected and once for the selected row)

- use the fireOnlyOnce variable to avoid calling twice the afterSelectionChange function.

Here's a sample code:

$scope.fireOnlyOnce=true;
$scope.gridOptions = {
    //Stuff
    afterSelectionChange: function (rowItem) {
        if($scope.fireOnlyOnce){
            if(rowItem.selected){
                //Do stuff
            }
        } else {
            $scope.fireOnlyOnce=true;
        }
    }
};

$scope.$on('ngGridEventData', jQuery.debounce(100, function (row, event){   
    var renderedRows = row['targetScope'].renderedRows.length;
    if(renderedRows>0){
        $scope.fireOnlyOnce=false;
        $timeout(function(){$scope.gridOptions.selectRow(2, true)});
    }
}));

Problem

Original source

Related problems

• Pre-Select rows on load with angular-ui-grid