Angular ui-grid without using scope

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s