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

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