I have the below Kendo UI gridOptions 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,
};
The approved & unapproved styles are defined as below:
.approved {
background-color: green;
}
.unapproved{
background-color: red;
}
So the problem is that when I apply the row template the grid is rendered empty. And when I apply the commented rowTemplate, then the grid is render with the rows, but only the 'approved' style is applied as shown below:
How can I apply the style to each TR based on the condition on a data bound field? Also when the commented rowTemplate is applied the columns are not displayed properly, how can we fix that ?
UPDATE:
The below rowTemplate helped be fix the background-color problem. But still unable to fix the column alignment issue.
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>',
kendo:grid-pageable-messagesThe text messages displayed in pager. Use this option to customize or localize the pager messages.
You need to use ng-class
directive here
rowTemplate: '<tr data-uid="#: uid #" ng-class="{approved : #:ApprovalStatus# ==\'Approved\', unapporved: #:ApprovalStatus# !=\'Approved\'></tr>'
You may check this fiddle
,
Hope it help....
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With