Given following Kendo dropdown I would like to add a class onto the optionLabel select, so when ddl expanded I can visually distinguish in between what is the option label and what are the options. Ideally this should be done from dataBound
and obviously must be done from js. I am looking for a fancy solution, I don't really want to traverse much of the DOM.
http://trykendoui.telerik.com/@vojtiik/uLEc
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
optionLabel: "select",
dataBound: function(e) {
// find the option label and add class
},
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.telerik.com/kendo-ui/service/Products",
}
}
}
});
you can do this on change event.. or may be any other way.. I think this way is quite easy.. you can also find the option label instead of finding the first child..
$(document).ready(function() {
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
optionLabel: "select",
change: function(e){
var listItem = $( "#products_listbox li:first-child" );
listItem.css( "background-color", "red" ) ;
},
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.telerik.com/kendo-ui/service/Products",
}
}
}
});
});