Search code examples
kendo-uitelerikkendo-multiselect

Kendo multiselect scrollbar click triggers drop down

Is there a way to prevent the multiselect control from expanding to reveal items if the scrollbar is clicked within the selected items area?

There is an example of the "issue" here, at least I would hope that this isn't desirable functionality. I would expect the selected items to scroll down/up, not to expose the selectable items within the multiselect control aswell.

Before the scrollbar is clicked:

Before scrollbar click

After scrollbar clicked:

After scrollbar click

Solution

  • Multiselect list is opened on mousedown event on multiselect widget. And mousedown event unlike click event is also triggered when u click on element scrollbar.

    Simplest way to change this behavor is change event what open multiselect. So first you have to stop orginal event:

    var multiselectwrap = multiselect.element.closest('.k-multiselect').find('.k-multiselect-wrap');
multiselectwrap.on('mousedown', function(e){
    e.stopPropagation();
});

    and second you can trigger open multiselect on click:

    multiselectwrap.on('click', function(e){
    multiselect.open();
});

    Kendo dojo with example: http://dojo.telerik.com/urUYU

    If you want to keep widget opening on mousedown you had to use mouse position from event and check if you click on scroll or not and it would complicate this code.