I have the following Kendo UI network settings for my angular page:
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, };
Approved and unapproved styles are defined below:
.approved { background-color: green; } .unapproved{ background-color: red; }
So the problem is that when applying the row pattern, the grid appears empty. And when I apply the commented rowTemplate, the grid is displayed with rows, but only the “approved” style is applied, as shown below:
How can I apply a style to each TR based on a condition in a data field? Also, when a numbered rowTemplate is applied, the columns are not displayed correctly, how can we fix this?
UPDATE:
Below rowTemplate helped fix the background color issue. But still the column alignment issue fails.
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>',