javascript - Kendo Multiselect To have arrow icon and behavior to close on click

Question

I am trying to add more functionality to my Kendo Multiselect, in order to behave like a normal dropdown list. I want it to have an arrow or a triangle icon, and to toggle and close on click on that icon. How can I achieve this?

Answer 1

这个问题在谷歌上出现的“剑道多选箭头”相当高。这是我正在使用的更完整的解决方案。（CSS Manuel 的回答很好——它实际上来自我在 Telerik 论坛上的帖子！）。

CSS 添加下拉箭头：

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

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

CSS

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

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()，例如。

这是一个证明它工作的小提琴。到目前为止我发现的唯一问题是，当您从多选中删除一个项目时，它会导致列表项关闭。

直到剑道将此作为功能添加之前，我认为这是我们能做的最好的！

编辑 - 抱歉，不是 Angular - 尽管如此。