Prevent Multiple Selection in the DropDownTree

Environment

Product Kendo UI DropDownTree
Kendo UI version Created with the 2019.1.220 version

Description

How to prevent multiple selection in the DropDownTree?

Solution

Handle the check event of the embedded TreeView. Save the UID of the checked node in a variable. 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

In this article
Not finding the help you need? Improve this article