How to conditionally provide a style for a grid cell?

Question

I'm using the Kendo UI grid in my AngularJS application and I would wish to apply a certain background color conditionally. Below is my column definition :

columns: [
    { field: "TradeAmount", title: "Trade Amount", width: "120px", filterable: { cell: { showOperators: false } } },
]

So the above column is bound to the 'TradeAmount' field of the data source. Now I have another field named 'ApprovalStatus' in my data source which can have value as 'Approved' or 'Unapproved'. Based on this value I wish to change the background color for cells in the column; Green for Approved and Red for Unapproved. Could someone help me out with that please.

Screenshot for @pankajparkar solution http://dojo.telerik.com/oREDI:

Answer 1

You could do this by using template option on field with ng-style directive.

columns: [
    { field: "TradeAmount", title: "Trade Amount", 
      width: "120px", filterable: { cell: { showOperators: false } }, 
      template: '<span ng-style="{background: #:ApprovalStatus# == \'Approved\'? \'red\': \'green\'}"></span>'
}]

Small Demo here

Update

For getting changes to be done on td element you need to apply it using the directive currently it is getting applied on the span which you are specifying in the templeate

.directive('setStyle', function() {
     return function(scope, element, attrs) {
        element.parent().css('backgroundColor', attrs.setStyle)
     }
})

Above directive will set background-color property inside td which is parent of specified template

Template

template: '<span set-style="#:FirstName == \'Nancy\'? \'red\': \'green\'#">#:FirstName#</span>',

Demo here