kendo-uitelerikkendo-asp.net-mvckendo-dropdown

Kendo DropDownList - add class at the optionLabel


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

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