Geek Answers Handbook

UI Grid throws an exception

I am trying to implement a UI grid tree view function in an application that uses ControllerAs instead of $ scope to bind data.

When implementing the TreeView function, as shown in the link http://ui-grid.info/docs/#/tutorial/215_treeView , I get an exception similar to this in line 18, according to the tutorial.

"asked to listen to the treeView.on.rowExpanded file, but the region was not passed in the input parameters. It is permissible to pass null, but you passed something else, so you are probably deliberately than not registering this"

How to resolve this?

+4
source share
1 answer

, . , - .

null, . vm.gridApi.treeBase.on.rowExpanded(null, function (row) { ... });

, .

, jsfiddle.

ui, controllerAs $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>
Hide result
+6

More articles:


All Articles