AngularJS ui-grid editableCellTemplate：'ui-grid / dropdownEditor'

Question

I am using "ui-grid - v3.2.6"

I have a grid with 6 columns, and out of that 2 columns ('Impact Value' and 'Effective Start Date') are editable.

'Impact Value' is using editableCellTemplate: 'ui-grid/dropdownEditor'

Data is displayed properly in the grid. But, when i double click on any of the editable columns. I see weird behavior , please see the screen shots. I would like to know what i am doing wrong that i am not seeing a dropdown when i double click on that column.

i followed the ui-grid tutorial link

 angular.module('impactMatrixModule') .controller("impactMatrixController", ["$scope", "$http", "$rootScope", "uiGridConstants", function ($scope, $http, $rootScope,uiGridConstants) { $scope.myExternalScope=$scope; var distTypes = [ { value: 'National Broadcast', label: 'National Broadcast' }, { value: 'Local Broadcast', label: 'Local Broadcast'}, { value: 'National Cable', label: 'National Cable'}, { value: 'National Cable SplitNet', label: 'National Cable SplitNet'}, { value: 'Local Cable Originator', label: 'Local Cable Originator'}, { value: 'Regional Cable', label: 'Regional Cable'}, { value: 'National Broadcast-Pioneer', label: 'National Broadcast-Pioneer'}, { value: 'Special Event', label: 'Special Event'}, { value: 'All Other Request', label: 'All Other Request'} ]; var imValues = [ { value: 'Y', label: 'Y' }, { value: 'N', label: 'N'}, { value: 'I', label: 'I'}, { value: 'Y/T', label: 'Y/T'} ]; $scope.gridOptions = { enableSorting: true, enableFiltering: true, enableColumnMenus: false, enableCellEditOnFocus: true, flatEntityAccess: true, fastWatch: true, minRowsToShow: 20, paginationPageSizes: [20, 50, 100, 500, 1000], paginationPageSize: 50, columnDefs: [ { field: 'distributorDesc', displayName: 'Distributor Type', enableCellEdit: false, filter: { selectOptions: distTypes, type: uiGridConstants.filter.SELECT, condition: uiGridConstants.filter.EXACT } }, { field: 'functionalArea' , displayName: 'Functional Area', enableCellEdit: false }, { field: 'applicationName', displayName: 'Application Name', enableCellEdit: false }, { field: 'changeType', displayName: 'Change Type', enableCellEdit: false }, { field: 'impactValue', displayName: 'Impact Value', width: '10%', enableFiltering: false, enableCellEdit: true, editType: 'dropdown', editDropdownOptionsArray: imValues, editDropdownIdLabel: 'impactValue', editDropdownValueLabel: 'impactValue', editableCellTemplate: 'ui-grid/dropdownEditor' }, { field: 'effStartDate', displayName: 'Effective Start Date', width: '10%', enableFiltering: false, type: 'date', cellFilter: 'date:"yyyy-MM-dd"' } ], onRegisterApi: function( gridApi ) { $scope.grid1Api = gridApi; } }; $http.get("/CRST/impactMatrix/distType/all") .then(function (evt) { console.log(evt.data.length) $scope.gridOptions.data = evt.data; }, function () { console.log("error occured while getting the response from Web service") }) }]); 

 <div class="row primaryContainer margin-top15"> <div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-edit ui-grid-resize-columns class="grid" ></div> </div> 

enter image description here

Answer 1

In the imValues array, you have a value and a label. In the column definition of the Impact values you have these two attributes wrong:

editDropdownIdLabel: 'impactValue',
editDropdownValueLabel: 'impactValue',

If I'm right, editDropdownValueLabel attribute indicates what you see when you focus on the cell, whereas editDropdownIdLabel attribute indicates the actual value of the selected option. Pretty much like the ordinary html tag. So this will work:

editDropdownIdLabel: 'value',
editDropdownValueLabel: 'label',

If it didn't work, use this:

editDropdownIdLabel: 'label',
editDropdownValueLabel: 'value',