Kendo UI DropDownTree only one checkbox is checked

I use DropDownTree from Kendo UI for jQuery. Its configuration is shown below. How do I make sure that only one checkbox is checked at a time? When the user clicks the second checkbox, the first one should uncheck if it was checked etc.

$("#dropdowntree").kendoDropDownTree({
    dataSource: new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: service.getData(),
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "Id",
                children: "Items"
            },
            parse: function (response) {
                if (typeof response !== "undefined" && typeof _id !== "undefined" && _id > 0) {
                    for (const item of response) {
                        const res = findItem(item, _id);
                        if (typeof res !== "undefined") {
                            res.checked = true;
                            break;
                        }
                    }
                }
                return response;
            }
        }
    }),
    checkboxes: {
        checkChildren: true
    },
    valueTemplate: '#: Name #',
    autoWidth: true,
    autoClose: false,
    height: 400,
    dataTextField: "Name",
    select: (e) => {
        if (e.sender.dataItem(e.node).Id < 0) {
            e.preventDefault();
        }
    }
}).data("kendoDropDownTree");

Answer

Here’s a demo of only one checkbox is checked at a time. When the user clicks the second item, the previous item is unchecked. Try this in the DOJO. Hope this helps.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<body>
    <div class="k-content">
        <h4>Select item</h4>
        <input id="dropdowntree" style="width: 100%;" />
    </div>
    <script>
        $(document).ready(function () {

            // create kendoDropDownTree from input HTML element
            $("#dropdowntree").kendoDropDownTree({
                placeholder: "Select ...",
                checkboxes: true,
                autoClose: false,
                dataSource: [
                    {
                        text: "Furniture", expanded: true, items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ]
                    },
                    {
                        text: "Decor", items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ]
                    }
                ],
                change: function(e) {
                    var values = this.value();

                    if (values.length > 1) {
                        values.splice(0, 1);
                        this.value(values);
                    }
                },
            });
        });
    </script>
</body>
</body>
</html>

Advertisement

Answer