feat(edit): add a function to retrieve dropdown options

Add a new member to ColumnDef: editDropdownOptionsFunction: a function returning an array of values in the format [ {id: xxx, value: xxx} ], which will be used to populate the edit dropdown. This can be used when the dropdown values are dependent on the backing row entity with some kind of algorithm. If this property is set then both editDropdownOptionsArray and editDropdownRowEntityOptionsArrayPath will be ignored.
angular-ui · Oct 26, 2015 · 480927f · 480927f · brianskrab · Dec 15, 2015
1 parent beefb67
commit 480927f
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 9 deletions.
diff --git a/misc/tutorial/201_editable.ngdoc b/misc/tutorial/201_editable.ngdoc
@@ -55,6 +55,7 @@ __ColumnDef Options__:
 - `editDropdownValueLabel` (default: `'value'`) Controls the value label in the options array - if your array happens to
   contain `'name'` instead you can use it without having to reprocess the array
 - `editDropdownRowEntityOptionsArrayPath` can be used as an alternative to editDropdownOptionsArray when the contents of the dropdown depend on the entity backing the row.
+- `editDropdownOptionsFunction` can be used as yet another alternative to editDropdownOptionsArray when the contents can be retrieved with a function whose parameters are row entity and column definition.
 - `editDropdownFilter` (default: `''`) Allows you to apply a filter to the values in the edit dropdown options, for example
   if you were using angular-translate you would set this to `'translate'`
 
@@ -93,7 +94,7 @@ $scope.gridOptions.columnDefs = [
       };
     });
 
-    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
+    app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
       $scope.gridOptions = {  };
 
       $scope.storeFile = function( gridRow, gridCol, files ) {
@@ -133,6 +134,22 @@ $scope.gridOptions.columnDefs = [
         { name: 'pet', displayName: 'Pet', width: '20%', editableCellTemplate: 'ui-grid/dropdownEditor',
           editDropdownRowEntityOptionsArrayPath: 'foo.bar[0].options', editDropdownIdLabel: 'value'
         },
+        { name: 'status', displayName: 'Status', width: '20%', editableCellTemplate: 'ui-grid/dropdownEditor',
+          cellFilter: 'mapStatus',
+          editDropdownOptionsFunction: function(rowEntity, colDef) {
+            var single;
+            var married = {id: 3, value: 'Married'};
+            if (rowEntity.gender === 1) {
+              single = {id: 1, value: 'Bachelor'};
+              return [single, married];
+            } else {
+              single = {id: 2, value: 'Nubile'};
+              return $timeout(function() {
+                return [single, married];
+              }, 100);
+            }
+          }
+        },
         { name: 'filename', displayName: 'File', width: '20%', editableCellTemplate: 'ui-grid/fileChooserEditor',
           editFileChooserCallback: $scope.storeFile }
       ];
@@ -180,6 +197,22 @@ $scope.gridOptions.columnDefs = [
         }
       };
     })
+
+    .filter('mapStatus', function() {
+      var genderHash = {
+        1: 'Bachelor',
+        2: 'Nubile',
+        3: 'Married'
+      };
+
+      return function(input) {
+        if (!input){
+          return '';
+        } else {
+          return genderHash[input];
+        }
+      };
+    })
   });
   </file>
   <file name="index.html">

diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js
@@ -457,8 +457,8 @@
    */
 
   module.directive('uiGridCell',
-    ['$compile', '$injector', '$timeout', 'uiGridConstants', 'uiGridEditConstants', 'gridUtil', '$parse', 'uiGridEditService', '$rootScope',
-      function ($compile, $injector, $timeout, uiGridConstants, uiGridEditConstants, gridUtil, $parse, uiGridEditService, $rootScope) {
+    ['$compile', '$injector', '$timeout', 'uiGridConstants', 'uiGridEditConstants', 'gridUtil', '$parse', 'uiGridEditService', '$rootScope', '$q',
+      function ($compile, $injector, $timeout, uiGridConstants, uiGridEditConstants, gridUtil, $parse, uiGridEditService, $rootScope, $q) {
         var touchstartTimeout = 500;
         if ($injector.has('uiGridCellNavService')) {
           var uiGridCellNavService = $injector.get('uiGridCellNavService');
@@ -652,6 +652,40 @@
              *  </pre>
              *
              */
+            /**
+             *  @ngdoc service
+             *  @name editDropdownOptionsFunction
+             *  @methodOf ui.grid.edit.api:ColumnDef
+             *  @description a function returning an array of values in the format
+             *  [ {id: xxx, value: xxx} ], which will be used to populate
+             *  the edit dropdown.  This can be used when the dropdown values are dependent on
+             *  the backing row entity with some kind of algorithm.
+             *  If this property is set then both editDropdownOptionsArray and 
+             *  editDropdownRowEntityOptionsArrayPath will be ignored.
+             *  @param {object} rowEntity the options.data element that the returned array refers to
+             *  @param {object} colDef the column that implements this dropdown
+             *  @returns {object} an array of values in the format
+             *  [ {id: xxx, value: xxx} ] used to populate the edit dropdown
+             *  @example
+             *  <pre>
+             *    $scope.gridOptions = {
+             *      columnDefs: [
+             *        {name: 'status', editableCellTemplate: 'ui-grid/dropdownEditor',
+             *          editDropdownOptionsFunction: function(rowEntity, colDef) {
+             *            if (rowEntity.foo === 'bar') {
+             *              return [{id: 'bar1', value: 'BAR 1'},
+             *                      {id: 'bar2', value: 'BAR 2'},
+             *                      {id: 'bar3', value: 'BAR 3'}];
+             *            } else {
+             *              return [{id: 'foo1', value: 'FOO 1'},
+             *                      {id: 'foo2', value: 'FOO 2'}];
+             *            }
+             *          },
+             *          editDropdownIdLabel: 'code', editDropdownValueLabel: 'status' }
+             *      ],
+             *  </pre>
+             *
+             */
             /**
              *  @ngdoc property
              *  @name editDropdownValueLabel
@@ -731,12 +765,24 @@
               }
               html = html.replace('INPUT_TYPE', inputType);
 
-              var editDropdownRowEntityOptionsArrayPath = $scope.col.colDef.editDropdownRowEntityOptionsArrayPath;
-              if (editDropdownRowEntityOptionsArrayPath) {
-                $scope.editDropdownOptionsArray =  resolveObjectFromPath($scope.row.entity, editDropdownRowEntityOptionsArrayPath);
-              }
-              else {
-                $scope.editDropdownOptionsArray = $scope.col.colDef.editDropdownOptionsArray;
+              // In order to fill dropdown options we use:
+              // - A function/promise or
+              // - An array inside of row entity if no function exists or
+              // - A single array for the whole column if none of the previous exists.
+              var editDropdownOptionsFunction = $scope.col.colDef.editDropdownOptionsFunction;
+              if (editDropdownOptionsFunction) {
+                $q.when(editDropdownOptionsFunction($scope.row.entity, $scope.col.colDef))
+                        .then(function(result) {
+                  $scope.editDropdownOptionsArray = result;
+                });
+              } else {
+                var editDropdownRowEntityOptionsArrayPath = $scope.col.colDef.editDropdownRowEntityOptionsArrayPath;
+                if (editDropdownRowEntityOptionsArrayPath) {
+                  $scope.editDropdownOptionsArray =  resolveObjectFromPath($scope.row.entity, editDropdownRowEntityOptionsArrayPath);
+                }
+                else {
+                  $scope.editDropdownOptionsArray = $scope.col.colDef.editDropdownOptionsArray;
+                }
               }
               $scope.editDropdownIdLabel = $scope.col.colDef.editDropdownIdLabel ? $scope.col.colDef.editDropdownIdLabel : 'id';
               $scope.editDropdownValueLabel = $scope.col.colDef.editDropdownValueLabel ? $scope.col.colDef.editDropdownValueLabel : 'value';