Kendo UI：如何使用模板更改 KendoDropDown 列表的背景颜色答案

【问题标题】：Kendo UI: How to change background color of KendoDropDown List using templateKendo UI：如何使用模板更改 KendoDropDown 列表的背景颜色
【发布时间】：2016-10-04 13:27:44
【问题描述】：

我有一个 Kendo 下拉菜单，可以很好地填充。一项要求是，如果使用模板返回的项目 IsActive 为 false，则突出显示项目的背景红色。以下是我到目前为止提出的代码。

 var carsDropDown = $("#ddlCars").kendoDropDownList({
        dataTextField: "DisplayValue",
        dataValueField: "Id",
        valuePrimitive: true,
        optionLabel: " ",
        dataSource: intakeView.viewModel.carsDataSource,
        template: '#= !data.IsActive ? \'<span style="background-color:redBackGroundColor"></span>\' : "" #'
    });

CSS：

.redBackGroundColor {
    background-color: red;   
}

上面的代码使所有下拉选项（包括所选选项）变灰。我只想将返回的选项的背景颜色更改为 IsActive 为 False。

【问题讨论】：

你想要class="redBackGroundColor"而不是style="redBackGroundColor"吗？
如果没有 - 添加一些工作示例 (jsfiddle/sn-p)
@Dekel 将其更改为 class 没有帮助
所以知道是时候添加工作示例了:)

标签： jquery css kendo-ui kendo-dropdown

【解决方案1】：

首先，您需要使用 Dekel 指出的类而不是样式。其次，您可能需要考虑更改前景色，而不是背景色，因为悬停时背景色是灰色的。您还需要将描述添加到模板中。像这样的东西应该可以工作：

var carsDropDown = $("#ddlCars").kendoDropDownList({
    dataTextField: "DisplayValue",
    dataValueField: "Id",
    valuePrimitive: true,
    optionLabel: " ",
    dataSource: intakeView.viewModel.carsDataSource,
    template: '<span class=\"k-state-default #= IsActive ? "" : "redBackGroundColor" #\">#: DisplayValue #</span>'
});

http://demos.telerik.com/kendo-ui/dropdownlist/template

【讨论】：

这是完美的。但是如果我想玩背景色，那么我应该玩什么课
类由你定义。您有一个名为 redBackGroundColor 的类，它确实会将背景颜色更改为红色。所以上面的代码会将其应用于非活动元素。
上面的代码改变了前景色。我想改变背景颜色。
我试过这个 '#: DisplayValue #' 但它没有工作
您不能在类中添加样式。您的最终结果将是这不是合法的 html。Kendo hash syntax 可能很棘手。