Kendo-ui 中的多选下拉选择

Question

有谁知道 kendo UI 是否有像 Angular Material 那样的多选功能？

我查找了一些 Kendo 控件，我所拥有的只是

multiselect

和关键字选择。不是我需要的。

这正是我所需要的：

[

但这就是我看到的：

Answer 1

不是开箱即用的：他们的下拉菜单是一个 DropDownList，专为单一选择而设计。

以下是关于解决方案及其局限性的讨论：

1. https://www.telerik.com/forums/dropdownlist-with-multi-select
2. https://www.telerik.com/forums/multiselect-with-checkbox

Answer 2

您可以使用Kendo Multiselect进行多选下拉菜单，几乎没有定制。

在

kendoMultiSelectSummaryTag

中添加

<kendo-multiselect>

属性。

Stackblitz 演示： Kendo Multiselect Dropdown

Answer 3

itemTemplate 适用于此问题。这是我的解决方案。

let $selectHtml = $(`<select class="multi-select-items" multiple="multiple" /></select>`);

const checkInputs = (elements) => {
    elements.each(index => {
        const element = $(elements[index]);
        const input = element.children("input");
        input.prop("checked", element.hasClass("k-state-selected"));
    });
};
const options = {
    itemTemplate: "<input type='checkbox'/> #:data.text#",
    autoClose: false,
    downArrow: true,
    dataBound: function() {
        var items = this.ul.find("li");
        window.setTimeout(() => {
            checkInputs(items);
        });
    },
    change: function() {
        var items = this.ul.find("li");
        checkInputs(items);
    },
    height: 150
};

$selectHtml.kendoMultiSelect(options);