This is a migrated thread and some comments may be shown as answers.

Multi - Selection Combobox

6 Answers 312 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
axwack
Top achievements
Rank 1
axwack asked on 05 Jul 2012, 05:17 PM
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?

6 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 10 Jul 2012, 01:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
SA-Ignite
Top achievements
Rank 1
answered on 12 Jul 2012, 04:45 PM
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>
0
SA-Ignite
Top achievements
Rank 1
answered on 12 Jul 2012, 10:15 PM
Any ideas on how to cancel that select event?
0
Petur Subev
Telerik team
answered on 13 Jul 2012, 12:43 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
SA-Ignite
Top achievements
Rank 1
answered on 13 Jul 2012, 01:53 PM
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)?
0
Georgi Krustev
Telerik team
answered on 18 Jul 2012, 03:33 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ComboBox
Asked by
axwack
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
SA-Ignite
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or