T.Aguiar T.Aguiar - 4 months ago 196
AngularJS Question

Angularjs - Angular UI Grid: It's possible to filter dynamically dropdown options by rowentity values?

I'm trying to filter a dropdown options using the rowEntity value.

$scope.data = [{
'id_a': 1,
'code': 1,
'line': 'Line 1 '
}, {
'id_a': 2,
'code': 2,
'line': 'Line 2'
}, {
'id_a': 3,
'code': 1,
'line': 'Line 3'
}, {
'id_a': 4,
'code': 3,
'line': 'Line 4'
}];


$scope.opts = [{
id: 1,
value: 'A',
code: 1
}, {
id: 2,
value: 'B',
code: 2
}, {
id: 3,
value: 'C',
code: 1
}, {
id: 4,
value: 'D',
code: 1
}, {
id: 5,
value: 'E',
code: 3
}, {
id: 6,
value: 'F',
code: 2
}];

$scope.columns = [{
field: 'line',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'code',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'value',
enableFiltering: false,
width: 500,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'value',
editDropdownOptionsArray: $scope.opts
}];

$scope.gridOptions = {
enableCellEditOnFocus: true,
enableFiltering: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
},
columnDefs: $scope.columns
};
$scope.gridOptions.data = $scope.data;


What i'm trying to do is load an array in
editDropdownOptionsArray
and then dynamically filter this array using a value.

If i'm in 'Line 1' then can only appear the options that have the same 'code' value.

In this case 'Line 1' have the code '1' then the dropdowns options are 'A','C','D'

How can i do this? Using
cellFilter
?

Here is a plunker with the base code.

Answer

Hope this works out for you, and feel free to accept it it does:

Working Plnkr

  1. Set your template:

    editableCellTemplate: 'dropdown.html'
    
  2. Add dropdown.html to your project:

<select ng-model="MODEL_COL_FIELD" ng-options="item as item.value for
item in col.colDef.editDropdownOptionsArray | filter : { code:
row.entity.code}"></select>
  1. Test:

enter image description here