Conditional cell template in ui-grid angularjs

Question

How to add conditional when showing data in ui-grid cellTemplate below:

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};

The expected result should be row status show Active/NonActive/Deleted.

Here is the plunker

Thanks in advance.

Secrete

Answer 1

You have to use externalScopes.

In your markup define the gridholder like this.

<div ui-grid="gridOptions" external-scopes="states" class="grid"></div>

And in your controller use this code:

var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.states = {
  showMe: function(val) {
    return statusTxt[val];
  }
};

var statusTemplate = '<div>{{getExternalScopes().showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

Or use an angular filter.

Note that this only renders text. The best approach would be to transform myData to have real text states before using it in ui-grid. Just in case you want to do some text based filtering later on.

Here is a Plunker

Trichinopoly

as of now (3.0.0RC18) getExternalScopes() is not working use grid.appScope instead, like this: var statusTemplate = '<div>{{grid.appScope.states.showMe(row.entity.status)}}</div>'; – Opus

I am using "ui-grid - v3.0.0-RC.18 - 2014-12-09" and getExternalScopes() is working as expected. – Mapel

Keep in mind that those guys are working hard to get this ball rolling. As you can see (in the documentation) the Tutorial for external scopes is gone and was replaced by this one ui-grid.info/docs/#/tutorial/305_appScope. RC means Release Candidate and is not the finished version. – Trichinopoly

Answer 2

I would suggest to use ng-if solve this problem.

$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">Non Active</div>'
    }]
};

Lamont

Simplest solution is to use ng-if as given above – Vernacularize

sweet and simple solution !! – Cestoid

Answer 3

I have got another solution for you without using external scopes:

The Template looks like this:

var statusTemplate = '<div>{{COL_FIELD == 0 ? "Active" : (COL_FIELD == 1 ? "Non Active" : "Deleted")}}</div>';

Here is the plunker:

http://plnkr.co/edit/OZtU7GrOskdqwHW5FIVz?p=preview

Transducer

Yep, that's cool! Although I still think preparing the data is the best way. With many states this could turn into a lengthy template. Nonetheless: +1 – Trichinopoly

Yep, you are so right. And I was wondering what to do, if this gets more complex. So I'm glad that i found your answer above! – Transducer

This works. Also it answers my question – Refugee

Answer 4

Use a cellFilter.

columnDefs: [{
    field: 'code'
}, {
    field: 'name'
}, {
    field: 'status',
    cellFilter: 'mapStatus'
}]


app.filter('mapStatus', function() {

    var statusMap = ['Active', 'Non Active', 'Deleted'];

    return function(code) {
        if (!angular.isDefined(code) || code < 0 || code > 2) {
            return '';
        } else {
            return statusMap[code];
        }
    };
});

plunker

Pazit

Cool stuff! I will definitely use this, if i don't have to change style depending on the value. – Transducer

Answer 5

You must change your template. When you are referring to external scopes in angular-ui-grid you may use grid.appScope.

var statusTemplate = '<div>{{grid.appScope.status[row.entity.status]}}</div>';

Monorail

I meant var statusTemplate = '<div>{{grid.appScope.status[row.entity.status]}}</div>'; – Monorail

Answer 6

Try below script. It is working for me.

  app.controller('MainCtrl', ['$scope',
  function($scope) {

  var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.showMe= function(val) {
    return statusTxt[val];
  };

var statusTemplate = '<div>{{grid.appScope.showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

$scope.gridOptions.data = [{
  "code": "Cox",
  "name": "Carney",
  "status": 0
}, {
  "code": "Lorraine",
  "name": "Wise",
  "status": 1
}, {
  "code": "Nancy",
  "name": "Waters",
  "status": 2
  }];
  }
]);

Pelf