将自定义CSS类传递给Kendo的Dropdown Widget

时间:2014-05-02 11:23:07

标签: javascript jquery css kendo-ui kendo-dropdown

我想将自定义CSS类传递给在.kendoDropDownList()<select>元素上调用<input>方法时生成的下拉HTML容器。

正如您在这个小提琴(http://jsfiddle.net/lav911/n9V4N/)中看到的那样,我感兴趣的HTML是:

<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>

我已经检查了文档,但我没有找到有关此特定问题的任何答案。我更感兴趣的是找到一个干净的,&#34; kendo&#39; ish&#34;解决这个问题的方法。

1 个答案:

答案 0 :(得分:6)

这就是我用来解决这个任务的方法:

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

我无法找到任何配置方式。

演示:http://jsfiddle.net/n9V4N/2/

或另一种方法:

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

演示:http://jsfiddle.net/n9V4N/3/