Using the drop-down list of ng options in the ediCellTemplate file with the ui network [ng-grid 3.x]

Question

I am using ng-grid 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 ng-options table a drop - down list populated with data obtained using the angular factory.

I am trying to do this using the editableCellTemplate ui-grid function.

Here is a sample 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's a plunker with code. [ Note: this is just a sample code. An array for ng options is retrieved from the angular factory in the actual code and is not declared in scope. editDropdownOptionsArray will probably not work because the data is dynamic.]

Can this be done using ui-grid? I thought that maybe this is a scope problem because if I put the ng-option code on my HTML page it worked properly, but what I can compile from the u-grid documentation is that the temp.html file should be in the area, I know that this material is still in an unstable release, but any help on this would be appreciated!

---

UPDATE 3/31/2015:

Hi guys, just notice if you try this solution and it doesn't work. In January, the code for external areas was reorganized from getExternalScopes() to grid.addScope.source . https://github.com/angular-ui/ng-grid/issues/1379

Here's an updated plunkr with new code: Click me!

Answer 1

You will need to use the external-scopes function in ux-grid version 3.x. The reason why you cannot get any parameters in the drop-down list is because the ui-grid is now using an isolated area, and this will not allow you to directly access the variables of the application area located in the cell.

I managed to get your plunkr to work with the steps below - see updated plunkr

Steps:

1) Inside index.html, specify the external-scopes attribute in the grid div ie modify

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

before

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

2) . In the app.js application, assign a scope to our appearance property. Add this line:

 $scope.myExternalScope = $scope; 

3) . Inside temp.html, access the genderTypes array using getExternalScopes () , i.e. change the value of editableCellTemplate from

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

before

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

Additional thoughts:

1) I did not find a ui-grid / dropdownEditor suitable for my needs, so I have not tried this.

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

Literature:

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

Answer 2

Not sure if this can help you, because I am also starting to play with the new ng network.

It seems that a lot has changed. From what I learned, I can tell you that there is no longer a need for cellTemplate if you want to have a drop down list. It is already integrated.

Activate it as follows:

 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 sure if I like this approach, but time and use will say ...

Oh, and I didn’t find out how to detect the changes. Continue searching for (lousy) documentation for the event, or if I need to look at the grid data for changes.

Tell me if you found something about this.

Still have fun with this plunker

Update:

I learned how to respond to change. Add / change these lines:

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

A warning appears when you leave edit mode. for example, Click outside the cell.

Hope this helps.

Answer 3

In fact, you can use editDropdownOptionsArray . It can be edited after initialization!

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