checkboxes Boolean|Object (default: false)

If true or an object, renders checkboxes beside each node.

Example - show node checkboxes

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  checkboxes: true,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

checkboxes.checkChildren Boolean(default: false)

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.

Example - enable tri-state checkboxes and propagate checked state to children

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  checkboxes: {
    checkChildren: true
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

checkboxes.name String

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

Example

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  checkboxes: {
    name: "checkedItems[]"
  },
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</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

Example - specify a different name for each checkbox, bound to the item id

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  checkboxes: {
    template: "<input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />"
  },
  dataSource: [
    { id: 1, text: "foo", items: [
      { id: 2, text: "bar" }
    ] }
  ]
});
</script>
In this article