[Solved] How stop propagation to the open event?

[Chance]

I have a multiselect with a 'clear all X' icon absolutely positioned to the right inside the .k-multiselect element. Everything works fine except I can not seem to stop the event from bubbling up to the open event when clicking. I do not want the list to open when clicking the close icon.

I considered filtering the target from the open event but could not find e.target inside the open event. Any ideas??

01.$("#multiSelector").kendoMultiSelect({
02.    dataTextField: "text",
03.    dataValueField: "id",
04.    dataSource: orgAccountsData,
05.    dataBound: function () {
06.        var $closeBtn = $("<span />", {
07.            id: "multiselectCloseBtn"
08.        });
09.
10.        $(".k-multiselect").append($closeBtn);
11.
12.        $("#multiselectCloseBtn").off("click").on("click", function (e) {
13.            e.stopPropagation();
14.            e.preventDefault();
15.
16.            $('#multiSelector').data("kendoMultiSelect").value([]);
17.        });
18.    }
19.});

[Petyo]

Hi,

I assume that you want to achieve something like this.

Regards,
Petyo
Telerik

 

 

[Chance]

Yes but the issue is the button placement triggers the open event of the list. 

Your demo does not absolutely place the trigger over the multiselect area. 

Worst case I can try and attach the clear button to the right side of the multiselect - but I was hoping to implement it this way and figure out how to stop the list from opening.

 

Thanks,

Chance

 

[Petyo]

Hello,

I did some ad-hoc positioning over here, and the event handling still works. Perhaps I am missing something? 

Regards,
Petyo
Telerik