Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Collapse]Navigation and Layout Extensions
   [Expand]FormLayout
   [Expand]Menu
   [Expand]NavBar
   [Expand]Ribbon
   [Expand]PageControl
   [Expand]TabControl
   [Expand]PopupMenu
   [Expand]Splitter
   [Collapse]TreeView
     Overview - TreeView
    [Collapse]Concepts
      Node
     [Expand]Binding to Data
      Expanding and Collapsing Nodes
      Animation Effect
      Selection
      Node Link Mode
      Check Box Support
      Callbacks
      Templates
    [Expand]Visual Elements
   [Expand]Panel
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Check Box Support

TreeView allows end-users to check nodes. To enable this feature, set the TreeViewSettings.AllowCheckNodes property to true. You can disable the check box for a particular node by setting its TreeViewNode.AllowCheck (via MVCxTreeViewNode.AllowCheck) property to false.

A node has two parameters that describe its check state:

The CheckState property is read only. It changes automatically upon the node's and node's child nodes' check state. The correspondence table of Checked and CheckState property values is presented below.

Appearance Checked CheckState Conditions (provided the CheckNodesRecursive is set to true)
true Checked The node has been checked or all its child nodes have been checked
false Unchecked The node has been unchecked or all its child nodes have been unchecked
false Indeterminate The node has checked and unchecked child nodes

 

Style Settings

TreeView allows you to change the appearance of all check boxes using the TreeViewStyles.NodeCheckBox (via TreeViewSettings.Styles.NodeCheckBox) property. The appearance of a particular check box can be customized via a node's TreeViewNode.CheckBoxStyle (via MVCxTreeViewNode.CheckBoxStyle) property. To customize an appearance of a focused check box, use the TreeViewStyles.NodeCheckBoxFocused (via TreeViewSettings.Styles.NodeCheckBoxFocused) property.

 

Server API

You can check/uncheck a node programmatically via the TreeViewNode.Checked (via MVCxTreeViewNode.Checked) property. When a node's Checked property values changes, the ASPxTreeView.CheckedChanged (MVCxTreeView.CheckedChanged) event occurs, allowing you to respond to this action. To obtain a node check state, use the TreeViewNode.CheckState (via MVCxTreeViewNode.CheckedState) property.

 

Client-Side API

On the client, you can handle the TreeViewClientSideEvents.CheckedChanged (via TreeViewSettings.ClientSideEvents.CheckedChanged) event to respond to a change of a node's Checked property value. To obtain and set a node's Checked property value, use the ASPxClientTreeViewNode.GetChecked and ASPxClientTreeViewNode.SetChecked methods respectively. To obtain a node check state, use the ASPxClientTreeViewNode.GetCheckState method.

 

Recursive Checking

You can allow end-users to employ recursive node checking. When the TreeViewSettings.CheckNodesRecursive property is set to true:

  • checking a parent node automatically checks all its children;
  • a parent node is automatically checked if all its child nodes are checked;
  • a parent node check state is automatically set to indeterminate if it has checked and unchecked child nodes.

Take a look at this image to see how recursive node checking works.

How would you rate this topic?​​​​​​​