Multi - Selection Combobox

[axwack]

I've created a multi select template that allows for selection of values in a combobox. How can you prevent the combobox from closing when you select? Is there a close override event?

[Petur Subev]

Hello Vincent,

Could you share the code you have used to customize the ComboBox? If it is possible we will try to find a work-around for your case.

Regards,
Petur Subev
the Telerik team

[SA-Ignite]

I recently did something similar.. I was hoping for a way to cancel the select event.  e.preventDefault and e.setValid(false) don't work (but it does throw an exception which sort works):

<input id="groupDropDownList" style="width:100%" />
 
<!-- loop through each of the data elements -->
<script id="treeDropdownTemplate" type="text/x-kendo-template">
  # for (var i = 0; i <= data.Level; i ++) { #
      &nbsp;
  # } #
  # if (data.GroupID) { #
    <input type="checkbox" class="treeSelection" value="${ data.GroupID }" data-name="${ data.Name }" id="group-${ data.ParentGroupID }-${ data.GroupID }" />
    <label for="group-${ data.ParentGroupID }-${ data.GroupID }">${ data.Name }</label>
  # } #
</script>
 
<script type="text/javascript">
    $(document).ready(function () {
        var emptyText = "Select one or more Groups";
 
        var dropdownListHelper = function () {
            var buildSelectedText = function () {
                var that = $("#groupDropDownList").data("kendoDropDownList"),
                    selectedItems = "";
 
                $(".treeSelection:checked").each(function () {
                    if (selectedItems != "") selectedItems += ", ";
                    selectedItems += $(this).attr("data-name");
                });
 
                if (selectedItems == "") selectedItems = emptyText;
 
                that.value(null);
                that.text(selectedItems);
            };
 
            return {
                buildSelectedText: buildSelectedText
            };
        } ();
 
        $("#groupDropDownList").kendoDropDownList({
            autoBind: true,
            dataTextField: "Name",
            dataValueField: "GroupID",
            optionLabel: emptyText,
            close: function (e) {
                dropdownListHelper.buildSelectedText();
            },
            select: function (e) {
		// TODO: cancel the select event
                e.setValid(false); // this just throws an exception
                return false;
            },
            template: $("#treeDropdownTemplate").html(),
            dataSource: {
                transport: {
                    read: "/api/groups"
                }
            }
        });
 
//        $(".treeSelection").change(function () {
//            dropdownListHelper.buildSelectedText();
//        });
    });
</script>

[SA-Ignite]

Any ideas on how to cancel that select event?

[Petur Subev]

Hello Tim,

Basically when you want to prevent the DropDown from closing you use the Close event and call the e.preventDefault() method of the argument object to prevent the DropDown from closing. Unfortunately in your scenario you cannot determine whether the user clicked on a checkbox or outside the dropdown area.

Kind Regards,
Petur Subev
the Telerik team

[SA-Ignite]

That works, however, as you said now the dropdown list doesn't close at all.  Is there a way to prevent the close event from being fired by the select event (or change event)?

[Georgi Krustev]

Hello Tim,

 
You can wire the click of the popup element and if the checkbox is clicked do not close:

var ddl = $("#groupDropDownList").data("kendoDropDownList"),
      prevent = false;

ddl.popup.element.on("click", "li", function(e) {
    if (e.target !== e.currentTarget) {
         //element diff then the li element is clicked
         prevent = true;
    } else {
         prevent = false;
     }
});

ddl.bind("close", function(e) {
       if (prevent) { e.preventDefault(); }
});

Please note that this is custom implementation and it is possible to not work in some of the future relase of KendoUI.

Greetings,
Georgi Krustev
the Telerik team