CODEWITHSUNDEEP
angularjsangular-ui-grid
BattlFrog
BattlFrog

Reputation: 3407

Angular UI Grid - how to change view on row select

I have a grid displaying data. I want to be able to route to a new view with a click of a grid row. Right now I am unable to even register a row click/selection. I have tried in my grid definition:

    onRegisterApi: function (gridApi ) {
        $scope.gridApi = gridApi;
        gridApi.selection.on.onRowSelectionChanged($scope, function (rows) {
            $scope.mySelections = gridApi.selection.getSelectedRows();                
        });
    },

with a call to mySelections in the html:

    <p>{{mySelections}}</p>

this results in error : Cannot read property 'on' of undefined. However, I can't tell what is 'undefined'.

I have also tried a separate function:

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope, function (row) {
        alert(row.isSelected);
        //$scope.mySelections = gridApi.selection.getSelectedRows();                
    });
};

but it returns the same error.

I have added ui.grid and ui.grid.selection to my angular.module. I would love to find an actual example of using rowselect to link to a new page, but I have to find anything.

Upvotes: 0

Views: 2028

Answers (2)

Didier68
Didier68

Reputation: 1333

Don't forget to add the "ui-grid-selection" attribut to your DIV :

 <div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ... ></div>

Upvotes: 0

iH8
iH8

Reputation: 28678

Cannot read property 'on' of undefined.

Suggests that the selection property is not available on your gridApi object, i'de double check if you really added the dependencies the right way:

angular.module('app', [
    'ui.grid',
    'ui.grid.selection'
]);

Next, calling gridApi.selection.on.onRowSelectionChanged won't work because the method is called rowSelectionChanged not onRowSelectionChanged. You've got that right in your second example. For the rest your code seems ok, perhaps there's something wrong in the rest of your grid definition. Here's one that works with an example using ui.router for view change:

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    multiSelect: false,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
        gridApi.selection.on.rowSelectionChanged($scope, function (rows) {
            var selection = gridApi.selection.getSelectedRows();
            $state.go('item', {item: selection[0]});
        });
    }
};

http://plnkr.co/edit/Rs9M6pJd83vK8syr3W9g?p=preview

Upvotes: 3

Related Questions