如何有条件地将样式应用于 Kendo UI 网格“行”？答案

【问题标题】：How to conditionally apply style to a Kendo UI grid 'row'?如何有条件地将样式应用于 Kendo UI 网格“行”？
【发布时间】：2015-06-05 17:03:24
【问题描述】：

我的角度页面有以下 Kendo UI gridOptions：

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 {
        background-color: green;
    }

.unapproved{
        background-color: red;
    }

所以问题是当我应用行模板时，网格呈现为空。当我应用注释的 rowTemplate 时，网格会与行一起呈现，但仅应用“已批准”样式，如下所示：

如何根据数据绑定字段的条件将样式应用于每个 TR？此外，当应用注释的 rowTemplate 时，列无法正确显示，我们该如何解决？

更新：

下面的 rowTemplate 帮助修复了背景颜色问题。但仍然无法修复列对齐问题。

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

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

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

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

【讨论】：

谢谢，但我必须对上面的代码进行一些更改才能使其正常工作。我已经用新的代码更新了这个问题。但是，列不与标题对齐的另一个问题仍然存在。知道如何解决这个问题吗？
@Lucifer 尝试在每个 td 上应用一些 css 类。你可能需要修复列的宽度
@@pankajparkar，你是在告诉我取消 rowTemplate 并在每一列上应用一个 ng-class 吗？如果存在直接在 TR 上应用样式的方法，则不需要它。我的实际网格中有大约 10 列，我必须在每一列上应用 ng-class。
@Lucifer 不，我告诉你对它们中的每一个应用 css 规则。像这里你可以这样做 .approved tr>td, .unapporved tr>td{ /*css here*/ } 你在每一行上都有控制器，使用 approved 和 unapporved 使用 css通过思考他们来统治
能否请您给我一个 Kendo UI 列定义的示例。

【解决方案2】：

您可以查看此fiddle ，希望对您有所帮助....

【讨论】：

我确实引用了那个链接...但它也需要 TD...如果我们在 rowTemplate 中指定 TD，那么标题对齐就会受到干扰。