Prevent Multiple Selection in the DropDownTree

Environment

Product	Progress® Kendo UI® DropDownTree for jQuery
Product Version	Created with the 2019.1.220 version

Description

How can I prevent multiple selection in the DropDownTree?

Solution

1. Handle the check event of the embedded TreeView.
2. Save the UID of the checked node in a variable.
3. On checking a new node, uncheck the previously checked node.

    <div id="example">
        <input id="dropdowntree" />

        <script>
            var checkedUid = "";

            $("#dropdowntree").kendoDropDownTree({
                dataSource: [
                    {
                    text: "Root1", items: [
                        { text: "item1" },
                        { text: "item2" },
                        { text: "item3" }
                        ]
                    },
                    {
                    text: "Root2", items: [
                        { text: "item1" },
                        { text: "item2" },
                        { text: "item3" }
                        ]
                    }
                ],
                checkboxes: true,
                treeview: {
                    check: function(e) {
                        var dataItem = e.sender.dataItem(e.node);


                        if(dataItem.checked && checkedUid != "") {
                            var oldChecked = e.sender.findByUid(checkedUid);
                            e.sender.dataItem(oldChecked).set("checked", false);
                        }

                        if(dataItem.checked) {
                            checkedUid = dataItem.uid;
                        }
                        else {
                            checkedUid = "";
                        }
                    }
                }
            });
        </script>
    </div>

See Also

• DropDownTree API Reference