将自定义 CSS 类传递给 Kendo 的下拉小部件

Posted 2023-05-07

【中文标题】将自定义 CSS 类传递给 Kendo 的下拉小部件

【英文标题】：Pass a custom CSS class to the Kendo's Dropdown Widget

【发布时间】：2014-06-19 01:38:34

【问题描述】：

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

正如您将在这个小提琴 (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>

我已经检查了文档，但没有找到有关此特定问题的任何答案。我更感兴趣的是找到一种干净的、“剑道式”的方式来解决这个问题。

【参考方案1】：

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

$('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/