UI Grid throws an exception

Question

I am trying to implement the UI Grid Tree view feature in an application which uses ControllerAs instead of $scope for binding the data.

When implementing the TreeView feature as shown in the link http://ui-grid.info/docs/#/tutorial/215_treeView, I am getting an exception like this on line number 18 as per the tutorial.

"asked to listen on treeView.on.rowExpanded but scope wasn't passed in the input parameters. It is legitimate to pass null, but you've passed something else, so you probably forgot to provide scope rather than did it deliberately, not registering"

How do I resolve this?

Answer 1

With-out seeing your code it's difficult to see what's your problem. But it sounds like you are passing something wrong to event register method.

Just pass null and it should work. vm.gridApi.treeBase.on.rowExpanded(null, function (row) { ... });

As mentioned in the docs you have to deregister the event manually later.

Please have a look at the demo below or in this jsfiddle.

It's the demo from ui grid homepage, just with controllerAs instead of $scope.

    var app = angular.module('app', ['ui.grid', 'ui.grid.treeView']); //'ngAnimate', 'ngTouch',

    app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridTreeViewConstants', function ($scope, $http, $interval, uiGridTreeViewConstants) {
        var vm = this;
        // $scope.gridOptions = {
        vm.gridOptions = {
            enableSorting: true,
            enableFiltering: true,
            showTreeExpandNoChildren: true,
            columnDefs: [{
                name: 'name',
                width: '30%'
            }, {
                name: 'gender',
                width: '20%'
            }, {
                name: 'age',
                width: '20%'
            }, {
                name: 'company',
                width: '25%'
            }, {
                name: 'state',
                width: '35%'
            }, {
                name: 'balance',
                width: '25%',
                cellFilter: 'currency'
            }],
            onRegisterApi: function (gridApi) {
                vm.gridApi = gridApi;
                // check how to deregister the rowExpanded event
                // e.g. in $scope.$on('$destroy', ...)
                vm.gridApi.treeBase.on.rowExpanded(null, function (row) {
                    if (row.entity.$$hashKey === vm.gridOptions.data[50].$$hashKey && !vm.nodeLoaded) {
                        $interval(function () {
                            vm.gridOptions.data.splice(51, 0, {
                                name: 'Dynamic 1',
                                gender: 'female',
                                age: 53,
                                company: 'Griddable grids',
                                balance: 38000,
                                $$treeLevel: 1
                            }, {
                                name: 'Dynamic 2',
                                gender: 'male',
                                age: 18,
                                company: 'Griddable grids',
                                balance: 29000,
                                $$treeLevel: 1
                            });
                            vm.nodeLoaded = true;
                        }, 2000, 1);
                    }
                });
            }
        };

        $http.get('http://crossorigin.me/http://ui-grid.info/data/500_complex.json')
            .success(function (data) {
            for (var i = 0; i < data.length; i++) {
                data[i].state = data[i].address.state;
                data[i].balance = Number(data[i].balance.slice(1).replace(/,/, ''));
            }
            data[0].$$treeLevel = 0;
            data[1].$$treeLevel = 1;
            data[10].$$treeLevel = 1;
            data[11].$$treeLevel = 1;
            data[20].$$treeLevel = 0;
            data[25].$$treeLevel = 1;
            data[50].$$treeLevel = 0;
            data[51].$$treeLevel = 0;
            vm.gridOptions.data = data;
        });

        vm.expandAll = function () {
            vm.gridApi.treeBase.expandAllRows();
        };

        vm.toggleRow = function (rowNum) {
            vm.gridApi.treeBase.toggleRowTreeState(vm.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
        };

        vm.toggleExpandNoChildren = function () {
            vm.gridOptions.showTreeExpandNoChildren = !vm.gridOptions.showTreeExpandNoChildren;
            vm.gridApi.grid.refresh();
        };
    }]);

    .grid {
        width: 500px;
        height: 400px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.min.js"></script>
<link href="http://ui-grid.info/release/ui-grid-unstable.min.css" rel="stylesheet"/>

<div ng-controller="MainCtrl as ctrl" ng-app="app">
    <button id="expandAll" type="button" class="btn btn-success" ng-click="ctrl.expandAll()">Expand All</button>
    <button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="ctrl.toggleRow(0)">Toggle First Row</button>
    <button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="ctrl.toggleRow(1)">Toggle Second Row</button>
    <button id="toggleExpandNoChildren" type="button" class="btn btn-success" ng-click="ctrl.toggleExpandNoChildren()">Toggle Expand No Children</button>
    <div id="grid1" ui-grid="ctrl.gridOptions" ui-grid-tree-view class="grid"></div>
</div>