TreeView Checkboxes

The checkboxes functionality in the TreeView provides various configuration options.

You can define the Checkboxes configuration option by:

• Using a Boolean value.

      @(Html.Kendo().TreeView()
          .Name("treeview")
          .DataTextField("Name")
          .Checkboxes(true)
          .DataSource(dataSource => dataSource
              .Read(read => read
                  .Action("Read_TreeViewData", "TreeView")
              )
          )
      )
  

      <kendo-treeview auto-bind="true" datatextfield="Name" load-on-demand="true" name="treeview">
          <hierarchical-datasource>
              <schema>
                  <hierarchical-model id="id"></hierarchical-model>
              </schema>
              <transport>
                  <read url="@Url.Action("Read_TreeViewData", "TreeView")"/>
              </transport>
          </hierarchical-datasource>
          <checkboxes enabled="true" />
      </kendo-treeview>
  

• Using inner (detailed) configuration options.

  • The Name() configuration sets the name attribute of the checkbox inputs. That name will be used when a form is being posted to the server.
  • The CheckChildren() option indicates whether checkboxes of child items will be checked when the checkbox of a parent item is checked. This option also enables tri-state checkboxes with an indeterminate state.

  • The TemplateId() option allows you to define a script template which will be used for the rendering of the checkboxes. Similarly, the Template() option allows the setting of an inline string template.

          @(Html.Kendo().TreeView()
            .Name("treeview")
            .DataTextField("Name")
            .Checkboxes(checkboxes => checkboxes
                .Name("checkedFiles")
                .CheckChildren(true)
                .TemplateId("checkbox-template")
            )
            .DataSource(dataSource => dataSource
                .Read(read => read
                    .Action("Read_TreeViewData", "TreeView")
                )
            )
          )          
          <script type="text/kendo-template" id="checkbox-template">
            <input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />
          </script>
    

        <kendo-treeview auto-bind="true" datatextfield="Name" load-on-demand="true" name="treeview">
            <hierarchical-datasource>
                <schema>
                    <hierarchical-model id="id"></hierarchical-model>
                </schema>
                <transport>
                    <read url="@Url.Action("Read_TreeViewData", "TreeView")"/>
                </transport>
            </hierarchical-datasource>
            <checkboxes check-children="true" enabled="true" template-id="checkbox-template"/>
        </kendo-treeview>
        <script type="text/kendo-template" id="checkbox-template">
            <input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />
        </script>
    

See Also

• Checkboxes in the TreeView HtmlHelper for ASP.NET Core (Demo)
• Server-Side API