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

This question comes up quite high on Google for "kendo multiselect arrow". Here's a more complete solution I'm using. (The CSS Manuel answered with is fine - it's actually from my post on the Telerik forums!).

CSS to add a dropdown arrow:

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

Trickery to make it a sideways facing arrow when opened:

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 can be worked out dynamically needs be - $('#foo').parents('.k-multiselect').parent(), for example.

Here's a fiddle demonstrating it working. The only problem I've found so far is that it'll cause the list items to be closed when you delete an item from the multiselect.

Until kendo add this as a feature, I think this is the best we can do!

Edit - sorry, not Angular - HTH nonetheless.