Map Dropdown In UI-Grid Inline

We know Angular UI Grid is a part of Angular UI, so we have some facilities. We need to download/install package before we are going to use in our application.

To download the package, go to URL: http://ui-grid.info

uig1

Html code

<!doctype html>
<html ng-app="app">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
</head>
<body>
    <div ng-controller="MainCtrl">
        <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
        <hr>{{gridOptions.data | json}}
    </div>
    <script src="app.js"></script>
</body>
</html>

AngularJS code snippet

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

app.controller('MainCtrl', ['$scope', '$http',
  function ($scope, $http) {

      $scope.genderTypes = [
          { ID: 1, type: 'Male' },
          { ID: 2, type: 'Female' },
          { ID: 3, type: 'Others' }
      ];

      $scope.gridOptions = {
          enableSorting: true,
          enableFiltering: true,
          enableCellEditOnFocus: true,

          columnDefs: [{
              field: 'name',
              sort: {
                  direction: 'desc',
                  priority: 1
              }
          },
          {
              field: 'gender',
              editType: 'dropdown',
              enableCellEdit: true,
              editableCellTemplate: 'ui-grid/dropdownEditor',
              editDropdownOptionsArray: $scope.genderTypes,
              editDropdownIdLabel: 'ID',
              editDropdownValueLabel: 'type',
              cellFilter: 'mapGender'
          },
          {
              field: 'company',
              enableSorting: false
          }],

          onRegisterApi: function (gridApi) {
              grid = gridApi.grid;
              gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                  if (colDef.name === 'gender') {
                      for (var i = 0; i < $scope.genderTypes.length; i++) {
                          var item = $scope.genderTypes[i];
                          if (item.type === newValue) {
                              //item.type = NameField //item.ID = ValueField
                              $scope.gridOptions.gender = item.type;
                              break;
                          }
                      }
                  }
              });
          }
      };

      $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
        .success(function (data) {
            //$scope.gridOptions.data = data;
            $scope.gridOptions.data = [
                { "name": "Himel Habibullah", "gender": "1", "company": "Enersol" },
                { "name": "Shashangka Shekhar", "gender": "1", "company": "Sealoud" },
                { "name": "Claudine Neal", "gender": "3", "company": "Sealoud" },
                { "name": "Masum Billah", "gender": "1", "company": "Sealoud" },
                { "name": "Rita Aloka", "gender": "2", "company": "Sealoud" }
            ];
        });

  }
]);

Mapper to display Name filed

app.filter('mapGender', function () {
    var genderHash = {
        '1': 'Male',
        '2': 'Female',
        '3': 'Others'
    };

    return function (input) {
        if (!input) {
            return '';
        } else {
            return genderHash[input];
        }
    };
});

Output

uig-ddl

Author:

Since March 2011, have 4 years of extensive hands on experience of software development.

One thought on “Map Dropdown In UI-Grid Inline”

Leave a Reply

Your email address will not be published. Required fields are marked *