How to conditionally apply style to a Kendo UI grid 'row'?

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>',

你需要在这里使用ng-class指令

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

你可以检查这个fiddle ,希望它有帮助....

链接地址: http://www.djcxy.com/p/85554.html

上一篇: 错误张贴消息与链接到Facebook

下一篇: 如何有条件地将样式应用于Kendo UI网格“行”?