Làm cách nào để có điều kiện áp dụng kiểu cho hàng lưới Kendo UI 'row'?

Question

Tôi có dưới Kendo UI gridOptions cho trang góc của tôi:

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, 
    }; 

Các phê duyệt & phong cách không được chấp thuận được định nghĩa như sau:

.approved { 
     background-color: green; 
    } 

.unapproved{ 
     background-color: red; 
    } 

Vì vậy, vấn đề là khi tôi áp dụng các hàng mẫu các lưới được hiển thị trống. Và khi tôi áp dụng các rowTemplate nhận xét, sau đó lưới điện là render với các hàng, nhưng chỉ có phong cách 'đã được phê duyệt' được áp dụng như hình dưới đây:

Làm thế nào tôi có thể áp dụng phong cách cho mỗi TR dựa trên điều kiện trên trường dữ liệu bị ràng buộc? Ngoài ra khi rowTemplate nhận xét được áp dụng, các cột không được hiển thị đúng cách, chúng ta có thể khắc phục điều đó như thế nào?

UPDATE:

dưới đây rowTemplate giúp được khắc phục vấn đề background-color. Nhưng vẫn không thể khắc phục vấn đề căn chỉnh cột.

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

Bạn cần phải sử dụng ng-class chỉ ở đây

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

Answer 2

Bạn có thể kiểm tra fiddle này, Hy vọng nó sẽ giúp ....