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!
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.