Kendo UI : 템플릿을 사용하여 KendoDropDown List의 배경색을 변경하는 방법

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