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?

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?

• javascript
• angularjs
• kendo-ui
• kendo-multiselect

Share Improve this question Follow edited Oct 30, 2015 at 11:58 Manuel Reis 57499 silver badges2929 bronze badges asked Aug 5, 2015 at 7:15 error505error505 1,21611 gold badge1818 silver badges2929 bronze badges 2

• What have you already tried? – suvroc Commented Aug 5, 2015 at 7:19
• I have tried to implement ng-click multiSelect.close(); ng-if aria expanded... If is Togle multiSelect.close(); so to have it on filed like this... I don't know how to pass a button on field with this functionality... I need some ideas or maybe possible solution. And only solution for getting arrow icon was in css .k-multiselect-wrap{ background: url(images/dropdowntriangle.png) no-repeat right center; background-color: rgb(255, 255, 255); } – error505 Commented Aug 5, 2015 at 8:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

This question es up quite high on Google for "kendo multiselect arrow". Here's a more plete 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'); // ▼ bees ◀
       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.