javascript - Kendo Multiselect 具有箭头图标和单击时关闭的行为

Question

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

Answer 1

对于“kendo multiselect arrow”，这个问题在 Google 上的排名很高。这是我正在使用的更完整的解决方案。 (CSS Manuel 的回答很好——它实际上来 self 在 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(), 对于示例。

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

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

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