I want to pass a custom CSS class to the dropdown HTML container that gets generated when calling .kendoDropDownList() method on a <select> or <input> element.

As you'll see in this fiddle ( / ) the HTML I'm interested in is this:

<div class="k-list-container k-popup k-group k-reset" data-role="popup">
    <ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" aria-live="off" style="overflow: auto;">
        <li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused">option 1</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 2</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 3</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 4</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 5</li>
    </ul>
</div>

I've checked the documentation but I did not find any answer regarding this specific issue. What I'm more interested in is to find a clean, "kendo'ish" way of solving this.

I want to pass a custom CSS class to the dropdown HTML container that gets generated when calling .kendoDropDownList() method on a <select> or <input> element.

As you'll see in this fiddle ( http://jsfiddle/lav911/n9V4N/ ) the HTML I'm interested in is this:

<div class="k-list-container k-popup k-group k-reset" data-role="popup">
    <ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" aria-live="off" style="overflow: auto;">
        <li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused">option 1</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 2</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 3</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 4</li>
        <li tabindex="-1" role="option" unselectable="on" class="k-item">option 5</li>
    </ul>
</div>

I've checked the documentation but I did not find any answer regarding this specific issue. What I'm more interested in is to find a clean, "kendo'ish" way of solving this.

• javascript
• jquery
• css
• kendo-ui
• kendo-dropdown

1 Answer 1

This is how I used to solve this task:

$('select').kendoDropDownList({
    open: function(e) {
        e.sender.popup.element.addClass('test');
    }
});

I was not able to find any configuration way.

Demo: http://jsfiddle/n9V4N/2/

Or another way to do it:

var dropDown = $('select').kendoDropDownList().data("kendoDropDownList");
dropDown.list.addClass('test');

Demo: http://jsfiddle/n9V4N/3/