In UI Grid, how can I use JSON results from Web API to fulfill the editDropdownOptionsArray option of a field?

Question

In UI Grid, how can I use JSON results from Web API to fulfill the editDropdownOptionsArray option of a field?

My grid is filled with data from Web API but I cannot wrap my head around doing this for an edit dropdown field within the grid, where the data is in the same format.

I see from this tutorial that I can manually specify the data and then use the editDropdownFilter to somehow constrain or filter the data in a format that the field understands.

Here is what I have so far but I'm drawing a blank or simply do not understand how to get my data to populate in the dropdown nor do I understand how to write a custom filter for my specific scenario. I have read Q&A for similar topics but somehow I'm still missing something.

// Angular Controller - Zero pay from fast remit
app.controller('ZpfrCtrl', ['$scope', '$http', 'coNumber', 'coName',  function ($scope, $http, coNumber, coName) {

 $scope.actionOptions = [];

 // Grid Options
 $scope.gridOptions = {

     ...

     // Column Definitions
     columnDefs: [
             ...

             {
                 name: 'Action',
                 displayName: 'ACTION',
                 width: 200,
                 editableCellTemplate: 'ui-grid/dropdownEditor',
                 cellFilter: 'mapGender' // will rename upon completion
                 editDropdownIdLabel: 'ID',
                 editDropdownValueLabel: 'ActionOption',
                 editDropdownOptionsArray: $scope.actionOptions
             },

             ...
     ],

     // Register API events
     onRegisterApi: function (gridApi) {

         //set gridApi on scope
         $scope.gridApi = gridApi;

         gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {

             // REST call to update when cell editing is complete
            $http.post('/api/UpdateZpfsPerID/' + rowEntity.ID + '/' + colDef.name + '/' + newValue);

             // Alert with data to test options
             // We can obtain other values with rowEntity: for example,  rowEntity.CodeDescriptions
             //alert('Column: ' + colDef.name + ' ID: ' + rowEntity.ID + ' Old Value: ' + oldValue + ' New Value: ' + newValue);
         });

     }

 };

 // Grid data from Web API
 $http.get('/api/GetZpfsPerCompany/' + coNumber + '/' + coName)
 .success(function (data) {
     $scope.gridOptions.data = data;
 }));

 // Action option data from Web API
 $http.get('/api/GetZpfsActionOptions')
 .success(function (data) {

     // Here I attempted to assign the array directly to the field option
     // $scope.gridOptions.columnDefs[22].editDropdownOptionsArray = data;

     // Here I am now, assigning the data to a simple array and then assign that array to the option. 
     $scope.actionOptions = data;

     console.log(data);
 })

}])

// This is where I'm lost...  how can I apply this to my own data?
.filter('mapGender', function() {
 var genderHash = {
  1: 'male',
  2: 'female'
 };

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

The data from my Web API consists of only two fields: ID and Actionoption.

I've done google searching for, say "UI Grid custom filter" but this would clearly bring you to a topic not related to filters in this context.

Thanks

Cody Hicks · Answer 1 · 2016-08-12T18:07:58.743

Well I found what I was looking for. Turns out, I just didn't give the browser enough time to refresh or hit F5 to reload when I made my first attempt at this which was to assign a promise to the editDropdownOptionsArray option like so...

// Action option data from Web API
$http.get('/api/GetZpfsActionOptions')
.success(function (data) {
    $scope.gridOptions.columnDefs[22].editDropdownOptionsArray = data;
})

turns out the filter thing has nothing to do with the actual retrieval of data, which is what I was after.

In UI Grid, how can I use JSON results from Web API to fulfill the editDropdownOptionsArray option of a field?

1 Answers1