UI-Grid showing undefined in cell dropdown

Question

When having a dropdown in a cell for the angular ui-grid all values show as undefined. Here is the grid setup in my controller.

var status = [
        { id: 1, type: 'Closed' },
        { id: 2, type: 'Pending' },
        { id: 3, type: 'Open' }
    ];

    // grid setup
    $scope.gridStore = {
        enableSorting: true,
        enableFiltering: true,
        flatEntityAccess: true,
        fastWatch: true,
        enableHorizontalScrollbar: 1,
        enableCellSelection: true,
        enableCellEditOnFocus: true,
        columnDefs: [
            { name: 'Number', field: 'Number', width: 150, pinnedLeft: true, enableCellEdit: false },
            { name: 'Name', field: 'Name', width: 300, pinnedLeft: true, enableCellEdit: false },
            { name: 'Date', field: 'Date', width:500 },
            { name: 'Status', field: 'Status', width: 500, editType: 'dropdown', editableCellTemplate: 'ui-grid/dropdownEditor', editDropDownValueLabel: 'type', editDropdownOptionsArray: status, filter: { selectOptions: status, type: uiGridConstants.filter.SELECT, condition: uiGridConstants.filter.EXACT } }
        ]
    };

Bah, it's editDropdownValueLabel now editDropDownValueLabel > — user441521, Feb 03 '17 at 19:28

score 1 · Answer 1 · answered Feb 03 '17 at 20:43

I'm assuming you fixed your own problem?

Also for future reference, a neat feature I use when dealing with dropdowns on ui grids is that I treat them like they're always dynamic so I no longer have to deal with OptionsArray and filters (which is a pain with dynamic data).

Just something to look into when you plan on expanding your knowledge in angular ui grid.

HTML:

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

Controller:

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};

temp.html:

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

UI-Grid showing undefined in cell dropdown

1 Answers1