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!
Just a note if you are 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!
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: