Jak warunkowo zastosować styl do "rzędu" Kendo UI?

Question

mam poniżej gridOptions Kendo UI dla mojego kątowej stronie:

ctrl.gridOptions = { 
     rowTemplate: '<tr data-uid="#: uid #" class="#:ApprovalStatus=\'Approved\'? \"approved\" : \"unapporved\"#"></tr>', 
     //rowTemplate: '<tr data-uid="#: uid #" class="#:ApprovalStatus=\'Approved\' ? \'approved\' : \'unapproved\' #"><td>#:ProcessName #</td><td>#:TradeAmount #</td><td>#:AQRID #</td><td>#:ApprovalStatus #</td></tr>', 
     dataSource: { 
      type: 'json', 
      transport: { 
       read: function (options) { 
        DataSvc.getTradesData().then(function (response) { 
         options.success(response.data); 

        }, function (response) { 
         alert('something went wrong') 
         console.log(status); 
        }); 
       } 
      }, 
      schema: { 
       model: { 
        fields: { 
         IsChecked: { type: "boolean" }, 
         ProcessName: { type: "string" }, 
         TradeAmount: { type: "number" }, 
         ApprovalStatus: { type: "string" } 
        } 
       } 
      }, 
     }, 
     selectable: "row", 
     sortable: true, 
     columns: [ 
      { field: "IsChecked", width: "30px", title: " ", template: '<input ng-disabled="dataItem.ApprovalStatus" ng-model="dataItem.IsChecked" type="checkbox" />', filterable: false, headerTemplate: '<input type="checkbox" ng-click="ctrl.checkAllTrades()" ng-model="ctrl.tradesChecked">' }, 
      { field: "ProcessName", title: "Process Name", width: "190px", filterable: { cell: { showOperators: false, template: processNameDropDownEditor } }, template: '<a style="font-size: x-normal;" href="#=Link#">{{dataItem.ProcessName}}</a>', attributes: { style: "text-align:left;" } }, 
      { field: "TradeAmount", title: "Trade Amount", width: "120px", filterable: { cell: { showOperators: false } } }, 
      { field: "ApprovalStatus", title: "Approval Status", width: "150px", filterable: { cell: { showOperators: false, template: approvalStatusDropDownEditor } } } 
     ], 
     filterable: { mode: "row" }, 
     height: 550, 
    }; 

Zatwierdzone & style niezatwierdzone są zdefiniowane jak poniżej:

.approved { 
     background-color: green; 
    } 

.unapproved{ 
     background-color: red; 
    } 

Więc problem jest, że kiedy zastosować szablon rzędu siatka jest renderowana pusta. I kiedy stosować skomentował rowTemplate, a następnie siatka jest render z wierszy, ale tylko „zatwierdzone” styl jest stosowany, jak pokazano poniżej:

Jak mogę zastosować styl do każdego TR w oparciu o warunek na polu związanym z danymi? Również, gdy zastosowany zostanie komentarz rowTemplate, kolumny nie są wyświetlane poprawnie, jak możemy to naprawić?

UPDATE:

Poniższa rowTemplate pomogły rozwiązać problem należy background-color. Nadal nie można naprawić problemu wyrównania kolumn.

rowTemplate: '<tr data-uid="#: uid #" ng-class="{approved: \'#:ApprovalStatus#\' ==\'Approved\', unapproved: \'#:ApprovalStatus#\' ==\'Unapproved\'}"><td>#:ProcessName #</td><td>#:Account #</td><td>#:AQRID #</td><td>#:ApprovalStatus #</td></tr>', 

Answer 1

Trzeba użyć ng-class dyrektywę tutaj

rowTemplate: '<tr data-uid="#: uid #" ng-class="{approved : #:ApprovalStatus# ==\'Approved\', unapporved: #:ApprovalStatus# !=\'Approved\'></tr>' 

Answer 2

Można to sprawdzić fiddle, Mam nadzieję, że pomoże ....