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.

Solution 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

Solution 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>'
    }]
};

Solution 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

Solution 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

Solution 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>';

View more solutions

Comments

[mainguy]

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

[nabinca]

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!

[nabinca]

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

[klode]

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)}}</di‌​v>';

[timtos]

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

[mainguy]

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.

[Alfredo Morales]

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

[Amir978]

Thanks @mainguy for your comment.

[wickjon]

Simplest solution is to use ng-if as given above

[Sagar Bhosale]

sweet and simple solution !!

[faizanjehangir]

This works. Also it answers my question