How can we add a row to an ng-grid and then have that row selected?

Question

My team have been trying the following:

   $scope.addTest = function () {
        var TestRow = {
            "name": "xx",
            "description": "xx",
            "subjectId": 15
        };
        $scope.gridOptions.selectAll()
        var testRowLength = $scope.gridData.push(TestRow);
        $scope.gridOptions.selectItem(testRowLength - 1, true);
    }

However the last selectItem does not correctly do a select. So we tried the following:

        $scope.$apply(function () {
            $scope.gridData.push(TestRow);
            $scope.gridOptions.selectItem(testRowLength - 1, true);
        });

Now we get an error message saying:

Error: $apply already in progress

This problem is posted as an issue on the ng-grid blog but it's only just been posted and we need help with this as soon as possible. I hope someone can give us advice on how we can

Answer 1

You're selecting the row too soon, use ngGridEventData event instead. I push new rows to the beginning of the grid, so scrolling is a little easier:

$scope.add = function(){
    var emptyContact = Utilities.newContact();
    var e = $scope.$on('ngGridEventData', function() {
        $scope.contactsGridOptions.selectItem(0, true);
        window.scrollTo(0,0);
        e();
    });

    $scope.contacts.unshift(emptyContact);
};

More about scrolling: How do I scroll an ngGrid to show the current selection?

Related ng-grid issue: https://github.com/angular-ui/ng-grid/issues/354