I have this ==>
$scope.uiGrid306 = {
rowTemplate:rowtpl,
columnDefs: [{
field: '_ab_area', name: 'Area', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS }
}, { ...
}, {
field: '_ab_x_style', name: 'Groups', width: "5%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
}
}
]//columnDefs
, enableFiltering: true
};//-->gridOptions
But my _ab_x_style has the data which is not user-friendly as I have wanted them to be. So I need a function to return a translation of those data to user-friendly words. The problem is HOW???
For that purpose, you need to apply a cellFilter to the cell content. And a translate function to drop down options which also has those non-userfriendly data.
cellFilter is a filter to apply to the content of each cell.
$scope.uiGrid306 = {
rowTemplate:rowtpl,
columnDefs: [{
field: '_ab_area', name: 'Area', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS }
}, { ...
}, {
field: '_ab_x_style', name: 'Groups', width: "5%", cellFilter: 'TranslateMe'
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
}
}
]//columnDefs
, enableFiltering: true
};//-->gridOptions
Right after your angular controller, you implement that filter by
Yours.controller('BodyController', function($scope, $http, $filter, uiGridConstants, $timeout, $resource) {
})
.filter( 'TranslateMe', function (){
return(function(value){
return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':(value=='dataExcepNew'?'aqua':'neutral')))));
});
});
Then, for your drop-down options, you also have to apply a function
function TranslateMe(value){
return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':'neutral'))));
}
for your options building as such
function loadOptions( $scope, serverdata ){
_.forEach( _.sortBy( _.uniq( _.pluck( serverdata, '_ab_x_style' )) ), function ( eachOpt ) {
RISKS.push( { value: eachOpt, label: TranslateMe(eachOpt) } )
} );
$scope.uiGrid306.columnDefs[10].filter.selectOptions = RISKS;
}
Result (instead of user unfriendly data, I have the names of the colors) --