Angular UI Grid - how to change view on row select

Question

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.

gridApi.selection is undefined, because that's the only object invoking the method on. — jperezov
– jperezov, Commented Dec 7, 2015 at 23:29

iH8 · Accepted Answer · 2015-12-07 23:55:02Z

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

Didier68 · Accepted Answer · 2016-03-28 20:41:29Z

0

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

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

answered Mar 28, 2016 at 20:41

Didier68

1,41517 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular UI Grid - how to change view on row select

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related