New to Kendo UI for jQuery? Start a free 30-day trial

Checkboxes

configuration

If true or an object, renders checkboxes beside each node. In this case the widget value should be an array.

checkboxes

Boolean|Object

<input id="dropdowntree" />

<script>
    $("#dropdowntree").kendoDropDownTree({
        dataSource: [
            {
                text: "foo", items: [
                    { text: "bar" }
                ]
            }
        ],
        checkboxes: true
    });
</script>

checkboxes.checkChildren

Boolean

Indicates whether checkboxes of child items should get checked when the checkbox of a parent item is checked. This also enables tri-state checkboxes with an indeterminate state.

Note: when filter is enabled 'checkboxes.checkChildren' property is reset to 'false' because enabling both at the same time could lead to ambiguous scenarios. Currently this scenario is not supported by the widget.

When this property is enabled, it should be used with loadOnDemand set to 'false'. Otherwise, after expand of a checked node (and load of its inner items) the value selected in the widget and the checked items in the drop-down will no longer be in sync. Currently, such scenario is not among the supported.

Default: false

<input id="dropdowntree" />

<script>
    $("#dropdowntree").kendoDropDownTree({
        dataSource: [
            {
                text: "foo", items: [
                    { text: "bar" },
                    { text: "bar1" }
                ]
            }
        ],
        checkboxes: {
            checkChildren: true
        }
    });
</script>

checkboxes.name

String

Sets the name attribute of the checkbox inputs. That name will be posted to the server.

<input id="dropdowntree" />

<script>
    $("#dropdowntree").kendoDropDownTree({
        dataSource: [
            {
                text: "foo", items: [
                    { text: "bar" },
                    { text: "bar1" }
                ]
            }
        ],
        checkboxes: {
            name: "checkedItems[]"
        }
    });
</script>

checkboxes.template

String|Function

The template which renders the checkboxes. Can be used to allow posting of additional information along the TreeView checkboxes.

The fields which can be used in the template are:

item - the data item of the given node
treeview - the TreeView options

<input id="dropdowntree" />

<script>
    $("#dropdowntree").kendoDropDownTree({
        dataSource: [
            {
                id: 1, text: "foo", items: [
                    { id: 2, text: "bar" },
                    { id: 3, text: "bar1" }
                ]
            }
        ],
        checkboxes: {
            template: "<input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />"
        }
    });
</script>