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.

score 28 · Accepted Answer · answered Nov 02 '14 at 11:06

28

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

answered Nov 02 '14 at 11:06

mainguy

8,283
2
31
40

21

as of now (3.0.0RC18) `getExternalScopes()` is not working use `grid.appScope` instead, like this: `var statusTemplate = '
{{grid.appScope.states.showMe(row.entity.status)}}
';` – klode Jan 24 '15 at 16:28
I am using "ui-grid - v3.0.0-RC.18 - 2014-12-09" and getExternalScopes() is working as expected. – timtos Feb 04 '15 at 11:42
4

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 http://ui-grid.info/docs/#/tutorial/305_appScope. RC means Release Candidate and is not the finished version. – mainguy Feb 04 '15 at 14:38
Thanks @mainguy for your comment. – Amir978 Sep 17 '15 at 02:36

score 19 · Answer 2 · edited Sep 12 '15 at 04:25

19

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

edited Sep 12 '15 at 04:25

Anik Islam Abhi

25,137
8
58
80

answered Jul 13 '15 at 12:23

Yang Zhang

4,540
4
37
34

1

Simplest solution is to use ng-if as given above – wickjon Dec 07 '15 at 12:26
sweet and simple solution !! – Sagar Bhosale Feb 11 '16 at 09:46

score 15 · Answer 3 · answered Nov 11 '14 at 14:36

15

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

answered Nov 11 '14 at 14:36

nabinca

2,002
1
18
29

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 – mainguy Nov 11 '14 at 14:42
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 Nov 11 '14 at 14:47
This works. Also it answers my [question](http://stackoverflow.com/questions/36070340/set-cell-value-based-on-a-condition) – faizanjehangir Apr 01 '16 at 17:24

score 10 · Answer 4 · edited Sep 12 '15 at 04:25

10

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

edited Sep 12 '15 at 04:25

Anik Islam Abhi

25,137
8
58
80

answered Nov 14 '14 at 00:31

Tom

219
1
5

Cool stuff! I will definitely use this, if i don't have to change style depending on the value. – nabinca Nov 16 '14 at 22:47

score 3 · Answer 5 · edited Sep 11 '15 at 22:45

3

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

edited Sep 11 '15 at 22:45

Andrew LaPrise

3,373
4
32
50

answered Sep 11 '15 at 21:17

Alfredo Morales

41
1

I meant var statusTemplate = '
{{grid.appScope.status[row.entity.status]}}
'; – Alfredo Morales Sep 11 '15 at 21:19

score 0 · Answer 6 · edited Nov 08 '17 at 11:43

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
  }];
  }
]);

Conditional cell template in ui-grid angularjs

6 Answers6

Linked