Using an ng-option dropdown in a ui-grid editableCellTemplate [ng-grid 3.x]

Question

I'm using ng-grid's new 3.0 release ui-grid to make a grid in my application. What i'm trying to do is make one of the editable cells in my table an ng-options dropdown that is filled with data retrieved with an angular factory.

I'm trying to do this by using the editableCellTemplate feature of the ui-grid.

Here is some example code:

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>

Here is a plunker with the code. [Note: this is just example code. Array for ng-options is being pulled in from angular factory in actual code and not declared in scope. editDropdownOptionsArray will probably not work because data is dynamic.]

Is it possible to do this with ui-grid? I thought maybe it was an issue of scope because if I would put the ng-option code in my HTML page it worked as expected, but what I can gather from ui-grid documentation is that the temp.html file should be in the scope. I know this stuff is still in unstable release, but any help on the matter would be appreciated!

---

UPDATE 3/31/2015:

Hi guys, just a note if your trying out this solution and it doesn't work. In January the code for external scopes was refactored from getExternalScopes() to grid.addScope.source. https://github.com/angular-ui/ng-grid/issues/1379

Here's the updated plunkr with the new code: Click Me!

Answer 1

You would need to use the external-scopes feature within 3.x version of ui-grid. The reason why you are not able to get any options in the select dropdown is because ui-grid now uses an isolated scope and this will not allow you to directly access app scope variables when in a cell.

I was able to get your plunkr working with steps below - see updated plunkr

Steps:

1) Within index.html, specify the external-scopes attribute in the grid div i.e. modify

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

to

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

2) Within app.js, assign the scope to our external-scope property i.e add this line:

$scope.myExternalScope = $scope;

3) Within temp.html, access the genderTypes array using getExternalScopes() i.e. modify editableCellTemplate value from

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType">

to

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes">

Extra Thoughts:

1) I did not find the ui-grid/dropdownEditor suitable for my needs - hence, did not try this out yet.

2) You can add cellTemplate also along with editableCellTemplate. You can assign both the same value.

References:

1. http://ui-grid.info/docs/#/tutorial/305_externalScopes

Answer 2

Not sure if this may help you, because I'm also just starting to play around with the new ng-grid.

It seems like a lot of options have changed. From what I learned I can tell you that there is no more need for a cellTemplate if you want to have a dropdown. It's already built in.

Activate it like this:

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

    $scope.genderTypes = [{
      ID: 1,
      type: 'female'
    }, {
      ID: 2,
      type: 'female'
    }, {
      ID: 3,
      type: 'both'
    }, {
      ID: 4,
      type: 'none'
    }, ];


    $scope.gridOptions = {
      enableSorting: true,
      enableFiltering: true,
      enableCellEditOnFocus: true,
      columnDefs: [{
        field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      }, {
        field: 'gender',
        editType: 'dropdown',
        enableCellEdit: true,
        editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownOptionsArray: $scope.genderTypes,
        editDropdownIdLabel: 'type',
        editDropdownValueLabel: 'type'
      }, {
        field: 'company',
        enableSorting: false
      }],
      onRegisterApi: function(gridApi) {
        grid = gridApi.grid;
      }
    };

    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });

  }
]);

I'm not quiet sure if I like this approach, but time and usage will tell ...

Oh, and I haven't found out how to detect changes. Still searching the (lousy) documentation for an event or if I have to watch grid-data for changes.

Tell me if you have found something about this.

So far have fun with this Plunker

Update:

I found out how to react to a change. Add/Change these lines:

  onRegisterApi: function(gridApi) {
    grid = gridApi.grid;
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef) {
      alert(rowEntity.name + ' ' + rowEntity.gender);
    });
  }

Alert pops up when you leave edit mode. e.g Click outside the cell.

Hope this helps.

Answer 3

You can in fact use editDropdownOptionsArray. It's perfectly possible to edit it after initialisation!

$scope.someFunction = function(){
  $scope.coulmnDefs.columnDefs[1].editDropdownOptionsArray = [
    {
      title: 'Some changed option',
      value: 'opt1'
    },
    {
      title: 'Some other changed option',
      value: 'opt2'
    }
  ]
}

Answer 4

I merely corrected file path, and this error vanished. Noticed that, when I having wrong file path (file not existing there), then were seeing this error.