Error when passing filter parameter in Uigrid with cell nav

Question

I have a editable Uigrid with ui-grid-cellnav directive to enable edit on focus. I also have a filter to display value instead of id in the dropdown.

<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellnav class="grid"></div>

JS

$scope.gridOptions.columnDefs = [
{ name:'name', width:100 },
{ name:'age', width:100},
{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
  cellFilter: "griddropdown:this", editDropdownIdLabel:'id',
  editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
  { id: 1, gender: 'male' },
  { id: 2, gender: 'female' }
] }
];

An error occurs whenever the dropdown value is modified. It seems the filter parameter is passed as a string instead of actual object, but not sure why. Works ok if I remove the cellnav directive.

Plnkr

Thanks in advance!

Answer 1

Interesting, I played with it a little bit and it looks like you are getting the desired results, just that occasionally ui-grid likes to pass a string as a parameter instead of the object.

If you add a check for a string in your filter it looks like you will still be getting the desired results, that's if I am understanding properly:

String check to add:

if (typeof context !== 'string') {}

Full Filter:

.filter('griddropdown', function() {
    return function (input, context) {
        if (typeof context !== 'string') {
            var map = context.col.colDef.editDropdownOptionsArray;
            var idField = context.col.colDef.editDropdownIdLabel;
            var valueField = context.col.colDef.editDropdownValueLabel;
            var initial = context.row.entity[context.col.field];
            if (typeof map !== "undefined") {
                for (var i = 0; i < map.length; i++) {
                    if (map[i][idField] == input) {
                        return map[i][valueField];
                    }
                }
            } else if (initial) {
                return initial;
            }  
         }
         return input;
     };
 });