Kendo 多选 具有箭头图标和点击关闭行为

Question

我正在尝试向我的 Kendo 多选添加更多功能，以便表现得像一个普通的下拉列表。我希望它有一个箭头或三角形图标，并在单击该图标时切换和关闭。我怎样才能做到这一点？

Answer 1

对于 "kendo multiselect arrow"，这个问题在 Google 上出现的频率很高。这是我正在使用的更完整的解决方案。 （CSS Manuel 的回答很好——它实际上来自我在 Telerik 论坛上的 post！）。

CSS 添加下拉箭头：

.k-multiselect:after {
content: "BC";
position: absolute;
top: 30%;
right: 25px;
font-size: 12px;
}

使它在打开时成为侧向箭头的技巧：

CSS

.k-multiselect.opened:after {
content: "C0";
}

JS

var Globals = {};

$('#foo').kendoMultiSelect({
    ...
    open: function(){
       $(this.element).parent().addClass('opened'); // ▼ becomes ◀
       Globals.MultiSelectIsOpening = true;
       setTimeout(function(){
           Globals.MultiSelectIsOpening = false;
       }, 100);
    },
    close: function(){
        $(this.element).parent().removeClass('opened');
    }
    ...
});

$('#foo_container').on('click', '.k-multiselect', function () {
    if (!Globals.MultiSelectIsOpening) {
        $('#foo').data('kendoMultiSelect').toggle();
    }
});

#foo_container 可以动态计算需要 - $('#foo').parents('.k-multiselect').parent()，例如。

Here's a fiddle 证明它有效。到目前为止我发现的唯一问题是，当您从多选中删除项目时，它会导致列表项目关闭。

直到 kendo add this as a feature，我认为这是我们能做的最好的了！

编辑 - 抱歉，不是 Angular - 不过是 HTH。