I started using Angular ui-grid in my application. I could found only documentation with $scope usage.
ui-grid version: 3.1.1
Link to ui-grid selection docs
Reason: one of the main reason why i want to avoid scope, our Angular 2 migration will be lot easy.
Created sample project in Plunker: Sample Project
grid.controller.js
Explanation:
1. In this ui-grid version both cell navigation and grid row selection will not work together
2. You can pass null value for scope parameter. you can refer to event registration in controller code.
gridApi.selection.on.rowSelectionChanged(null, _self.onSelectRow);
var GridController = (function () { function GridController() { this.gridOptions = this.getGridOptions(); this.gridOptions.data = [{name: "test1", gender: "male", company: "com1"}, {name: "test2", gender: "male", company: "com2"}, {name: "test3", gender: "female", company: "com3"}] } GridController.prototype.getGridOptions = function () { var _self = this; return { enableRowSelection: true, enableRowHeaderSelection: false, columnDefs: [ { field: 'name' }, { field: 'gender' }, { field: 'company' } ], appScopeProvider: _self, multiSelect: false, modifierKeysToMultiSelect: false, noUnselect: true, enableFiltering: true, enableSorting: true, onRegisterApi: function (gridApi) { _self.gridApi = gridApi; gridApi.selection.on.rowSelectionChanged(null, _self.onSelectRow); } }; }; GridController.prototype.onSelectRow = function (selectedRow) { console.log(selectedRow); }; return GridController; }());
script.js
Note: This has code for modules and directives. Directive uses controller as syntax
// Code goes here (function() { var appControllers = angular.module("app.Controllers", []); appControllers.controller("GridController", GridController); var appDirectives = angular.module("app.Directives", ["ui.grid", "ui.grid.selection", 'ui.grid.cellNav', 'ui.grid.pinning']); appDirectives.directive("demoGrid", function() { return ({ restrict: 'E', templateUrl: "grid.html", controller: "GridController as gc", }); }); var app = angular.module("app", ["app.Controllers", "app.Directives"]); })();
Happy Coding!