Checkboxes

The checkboxes functionality enables multiple selection in the DropDownTree wrapper for Vue.

Once the checkboxes option is set to true, the DropDownTree provides the multiple selection functionality by rending each checked item as a tag in its input. You can remove the tags (items) through their X button which will automatically uncheck them in the drop-down.

Along with the standard checkbox support, the DropDownTree allows you to manage the checked state of all nodes. To enable this functionality, set the checkAll option to true.

The following example demonstrates how to enable the checkboxes and the multiple selection for the DropDownTree.

<div id="vueapp" class="vue-app">
    <kendo-dropdowntree :data-source="localDataSource"
                        :checkboxes="true"
                        :check-all="true"
                        :placeholder="'Select ...'"
                        style="width: 400px;">
    </kendo-dropdowntree>
</div>
Vue.use(DropDownTreeInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            localDataSource: new kendo.data.HierarchicalDataSource({
                data: [{
                    text: 'Furniture',
                    items: [
                        { text: 'Tables & Chairs' },
                        { text: 'Sofas' },
                        { text: 'Occasional Furniture' }
                    ]
                },{
                    text: 'Decor',
                    items: [
                        { text: 'Bed Linen' },
                        { text: 'Curtains & Blinds' },
                        { text: 'Carpets' }
                    ]
                }]
            })
        }
    }
})

In this article