Kendo DropDownList - add class at the optionLabel

Question

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

Jayesh Goyani · Answer 1 · 2014-04-17T13:18:38.990

Please try with the below code snippet.

Method1:

<style type="text/css">
    #products_listbox li:first-child
    {
        background-color: Red !important;
        color: Yellow !important;
    }
</style>

Note : Products_list, in this Products is your dropdown ID.

Method2:

<script type="text/javascript">
    $(document).ready(function () {
        $("#products").kendoDropDownList({
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                optionLabel: "select",
                open: function(e){
                        var listItem = $( "#products_listbox li:first-child" );
                        listItem.css( "background-color", "red" );
                        listItem.css( "color", "Yellow" );
                        },
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "http://demos.telerik.com/kendo-ui/service/Products",
                        }
                    }
                }
            });
    });
</script>

I will try to create more generic solution once i will done with this. i will update you.

Note : Please use method1 for better performance of your page.

interesting I didn't think about the pure css only solution +1 for that ! I have moved @user3455199 's solutio into `databound` and it does the job for me just fine. The on `change` or `open` occurs too often, I want to do this only once the options doesn't change in between opens. Thx and don't worry about the generic solution I have that already sorted. — Vojtiik, Apr 17 '14 at 11:55

score 2 · Accepted Answer · edited Apr 17 '14 at 11:12

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

Looks good to me, I believe it will also work from the `databound` so I don't have to add the class over and over again. Let me try. Thx @user3455199 — Vojtiik, Apr 17 '14 at 11:14
you can also use this for databound logic.. dataBound: function(e){ var optionLabel = e.sender.list.find("li:first-child"); optionLabel.addClass("yourClass"); }, — A dev, Apr 17 '14 at 12:04

score 1 · Answer 3 · answered Apr 17 '14 at 11:49

1

You can use the open event to find the first LI element from the UL and modify its styles.

e.g.

  open: function(e) {
    this.list.find(">ul>li:first").css("background", "red")
  }

Example here.

answered Apr 17 '14 at 11:49

Petur Subev

19,983
3
52
68

score 1 · Answer 4 · answered Oct 21 '19 at 11:41

As stated on this question : Kendo UI [kendoDropDownList] - onSelect optionLable, add CSS class

No need to play with open function, you can achieve it with optionLabelTemplate:

$("#selectBox").kendoDropDownList({
    ...
    optionLabel: "Select",
    optionLabelTemplate:'<span style="color:red">Select</span>',
    ...
});

Replace style="color:red" by class="yourClassName" ;-)

Kendo DropDownList - add class at the optionLabel

4 Answers4