jquery - 剑道用户界面 : How to change background color of KendoDropDown List using template

Question

我有一个 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。

Answer 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