Kendo DropDownList - add class at the optionLabel

kendo-asp.net-mvc, kendo-dropdown, kendo-ui, telerik

Solution

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",
                                }
                            }
                        }
                    });
                });

Problem

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", } } } }); ```

Original source