Using an ng-option dropdown in a ui-grid editableCellTemplate [ng-grid 3.x]
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.
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:
- http://ui-grid.info/docs/#/tutorial/305_externalScopes