angular-ui-gridui-grid

ui-grid columnDefs : how to translate cell content to some value which is user-friendly and a function of the data?


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???


Solution

  • 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) --

    Make User-friendly Data