剣道UI：テンプレートを使用して剣道ドロップダウンリストの背景色を変更する方法

Question

剣道のドロップダウンがあります。 1つの要件は、項目が戻ってきた場合にアイテムの背景赤を強調表示することです。テンプレートを使用して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