javascript - AngularJS doesn't create gridApi.selection -
getting following error , spent last few hours trying figure out getting no where. pointers appreciated.
angular.js:13920 typeerror: cannot read property 'on' of undefined @ object.onregisterapi (http://localhost:47167/alms_scripts/angular_controllers/mikesptest.js:70:31) @ p.renderingcomplete (http://localhost:47167/scripts/ui-grid.min.js:7:25738) @ object.post (http://localhost:47167/scripts/ui-grid.min.js:7:2958) @ http://localhost:47167/scripts/angular.min.js:16:71 @ http://localhost:47167/scripts/angular.min.js:81:33 @ la (http://localhost:47167/scripts/angular.min.js:81:90) @ p (http://localhost:47167/scripts/angular.min.js:66:341) @ http://localhost:47167/scripts/angular.min.js:77:24 @ http://localhost:47167/scripts/angular.min.js:131:20 @ m.$eval (http://localhost:47167/scripts/angular.min.js:145:347) <div ui-i18n="en" class="grid ui-grid ng-isolate-scope grid1470663737538" id="regs" ui-grid="gridoptionsregs"> error occurs @ line 'gridapi.selection.on.rowselectionchanged' in script file mikesptest.js
my html & scripts
var app = angular.module('regapp', [ 'ngroute', 'ui.grid', 'ui.grid.pagination', //data grid pagination 'ui.grid.resizecolumns', //data grid resize column 'ui.grid.movecolumns', //data grid move column 'ui.grid.pinning', //data grid pin column left/right 'ui.grid.selection', //data grid select rows 'ui.grid.autoresize', //data grid enabled auto column size 'ui.grid.exporter', //data grid export data 'ui.grid.selection' //data gid selection ]); app.controller('regctrl', ['$scope', '$http', 'crudservice', 'uigridconstants', function ($scope, $http, crudservice, uigridconstants) { var paginationoptions = { pagenumber: 1, pagesize: 25, sort: null }; //ui-grid call $scope.getregulations = function () { $scope.loadermore = true; $scope.lblmessage = 'loading please wait....!'; $scope.loadingcolor = "color-green"; $scope.highlightfilteredheader = function (row, rowrenderindex, col, colrenderindex) { if (col.filters[0].term) { return 'header-filtered'; } else { return ''; } }; } //set grid $scope.gridoptionsregs = { showgridfooter: false, enablesorting: true, multiselect: false, enablefiltering: true, enablerowselection: true, enablefullrowselection: true, enableselectall: true, enablegridmenu: true, paginationpagesizes: [25, 50, 75, 100], paginationpagesize: 25, useexternalpagination: true, useexternalsorting: false, columndefs: [ { name: 'id', field: 'id', displayname: "id", width: '10%', pinnedleft: true, enablefiltering: false }, { name: 'regulation', field: 'regulation', displayname: "regulation", width: '25%', pinnedleft: true }, { name: 'regulationlongtitle', field: 'regulationlongtitle', displayname: "regulation long title", width: '65%', pinnedleft: true, nablefiltering: false } ], onregisterapi: function (gridapi) { $scope.gridapi = gridapi; $scope.gridapi.core.on.sortchanged($scope, function (grid, sortcolumns) { if (sortcolumns.length == 0) { paginationoptions.sort = null; } else { paginationoptions.sort = sortcolumns[0].sort.direction; } getpage(); }); gridapi.selection.on.rowselectionchanged($scope, function (row) { $scope.myselections = gridapi.selection.getselectedrows(); }); gridapi.pagination.on.paginationchanged($scope, function (newpage, pagesize) { paginationoptions.pagenumber = newpage; paginationoptions.pagesize = pagesize; getpage(); }); } } var apirouteregulations = 'http://localhost:vvv/api/regulationstandard/getlistregulationsstandards'; var getpage = function () { var result = crudservice.getregulationsstandards(apirouteregulations); result.success(function (data) { $scope.gridoptionsregs.totalitems = data.recordstotal; var firstrow = (paginationoptions.pagenumber - 1) * paginationoptions.pagesize; $scope.gridoptionsregs.data = data.lstres.slice(firstrow, firstrow + paginationoptions.pagesize); $scope.loadermore = false; }).error(function (error) { console.log(error); }); } //program flow $scope.getregulations(); getpage(); }]);@{ viewbag.title = "regulations"; layout = "~/views/shared/_layout.cshtml"; } <script src="~/scripts/ui-grid.min.js"></script> <link href="~/content/ui-grid.min.css" rel="stylesheet" /> <!-- custom references --> <script src="~/alms_scripts/angular_controllers/mikesptest.js"></script> <script src="~/alms_scripts/services/crudservice.js"></script> <body> <div class="col-md-10"> <h2>regulations</h2> <div ng-app="regapp"> <div ng-controller="regctrl"> <div id="regs" ui-grid="gridoptionsregs" class="grid"> </div> <!-- div close id="regs" --> <div class="loadmore"> <div ng-show="loadermore" ng-class="loadingcolor"> <img src="~/content/images/ng-loader.gif" /> {{lblmessage}} </div> <!-- div close ng-show="loadermore" --> </div> <!-- div close class="loadmore" --> </div> <!-- div close ng-controller="regctrl" --> </div> <!-- div close ng-app="regapp" --> </div> <!-- div close class="col-md-10"" --> </body>##
Comments
Post a Comment