Angular ui-grid :dropdown with multiple select

Question

I am trying to use multiple select in anguler-ui-grid but get error:

TypeError: value.forEach is not a function at writeNgOptionsMultiple [as writeValue] (angular.js:26579) at ngModelCtrl.$render (angular.js:28680) at Object.ngModelWatch (angular.js:25493) at Scope.$digest (angular.js:15888) at angular.js:16091 at completeOutstandingRequest (angular.js:5552) at angular.js:5829(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292Scope.$digest @ angular.js:15914(anonymous function) @ angular.js:16091completeOutstandingRequest @ angular.js:5552(anonymous function) @ angular.js:5829

Here is the code: The only change from the official template is the "multiple" attribute in the dropdown template tpl

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

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

  var myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "employed": false
    }
];

var dropDownArray = [
      { id: 'Gabi', firstName: 'Gabi' },
      { id: 'Gabriel', firstName: 'Gabriel' }];


$scope.msg = "hello shit";

var tpl = '<div>\
  <form\
    name="inputForm">\
    <select multiple\
      ng-class="\'colt\' + col.uid"\
      ui-grid-edit-dropdown\
      ng-model="MODEL_COL_FIELD"\
      ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">\
    </select>\
  </form>\
</div>';

$scope.gridOptions = { data: myData,                        
                       columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 190,  
                                        editableCellTemplate: tpl, 
                                        editDropdownValueLabel: 'firstName',
                                        editDropdownOptionsArray: dropDownArray },
                                    { field: 'lastName', displayName: 'Last Name', width: 180 },                                    
                                    { field: 'employed', displayName: 'employed?', width: 180 }]}
}]);

Horst Brack Horst Brack · Accepted Answer · 2016-06-26T16:07:28

I ran into the same problem - a tough one because it works with angular 1.2 but not with 1.4. The solution for me was that the initial field value has to be an array, not a string. So your data must look like this:

  var myData = [
    {
        "firstName": ["Cox"],
        "lastName": "Carney",
        "employed": true
    },
    {
        "firstName": ["Lorraine"],
        "lastName": "Wise",
        "employed": false
    },
    {
        "firstName": ["Nancy"],
        "lastName": "Waters",
        "employed": false
    }
];

And the error should go away.

Angular ui-grid :dropdown with multiple select

1 Answers