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

Kendo UI：如何使用模板更改KendoDropDown List的背景颜色

1 个答案: