Getting Started with Windows Forms TreeView
This section will provide a step-by-step procedure to design a
TreeViewAdv control by using designer and through programming approach in .NET application.
Dependent assembly: Syncfusion.Shared.Base
|Syncfusion.Shared.Base||Contains the base classes for Scrolling and Utilities.|
|Syncfusion.Tools.Windows||Contains classes that handles all UI operations, fundamentals and base classes of TreeViewAdv.|
Adding control via Designer
Create a new Windows Forms application in the Visual Studio and follow the steps given.
Drag and drop the
TreeViewAdv control from the toolbox to the designer. It generates the
TreeViewAdv as shown:
Adding control manually in C#
To create a
TreeViewAdv control through C#, use the following code.
Add the below required assembly references to the project,
Create the TreeViewAdv control instance and add it to the Form
TreeViewAdv treeViewAdv1 = new TreeViewAdv(); this.Controls.Add(treeViewAdv1);
Dim treeViewAdv1 As New TreeViewAdv() Me.Controls.Add(treeViewAdv1)
Adding Node to the control
Tree nodes can be added to the control at design time as follows.
TreeViewAdvcontrol in the form.
Click the smart tag of the TreeViewAdv and click Edit Node Collection to open the TreeNodeAdv NodeCollection Editor.
You can also open this editor using task window or by right clicking the control and selecting Nodes Editor.
In the NodeCollection Editor, Click “Add Node” to add a new top-level node. We can also add top level nodes by clicking the Add Node option on right clicking the control.
The Nodes can be customized using the properties displayed in the NodeCollection Editor. Specify a custom label for the node by changing its text property as shown in the below image.
Click “Add Node” to add another sibling to the selected node.
Click “Add Child” to add a child node to the selected node.
Repeat steps 5 and 6 as required in the application.
Click “Remove” to delete a selected node.
To move a node to a different parent, just drag-and-drop that node over the parent or besides the desired sibling.
Click “OK” to save changes.
Tree nodes can be added to the control programmatically as follows.
Step 1: Create a new instance of a node.
//Creating new instance of node. TreeNodeAdv node = new TreeNodeAdv("Asia");
'Creating new instance of node. Dim node As New TreeNodeAdv("Asia")
Step 2: Add the created node to the tree control. This will add as a top-level node.
//Add the created nodes to the TreeViewAdv. this.treeViewAdv1.Nodes.Add(node);
'Add the created nodes to the TreeViewAdv. Me.treeViewAdv1.Nodes.Add(node)
Step 3: We can add a child node to an existing node, using the below code snippet
//Add nodes to the existing nodes. node.Nodes.Add(new TreeNodeAdv("India"));
'Add nodes to the existing nodes. node.Nodes.Add(New TreeNodeAdv("India"))
Step 4: Repeat steps 1 to 3 to continue adding more top-level nodes and child nodes.
Step 5: Run the application.
Step 6: The resulting form is shown in the below image.
We can display the Root lines between the root nodes by setting the property
ShowRootLines to True. Whereas the property
ShowLines displays connecting line for rest of the nodes in the control except between the root nodes. By default,
ShowLines are set as
ShowLines is set to
false, the connecting lines will not be displayed for the entire control
|ShowLines||Indicates if the tree lines are visible.|
|ShowRootLines||Indicates whether lines are displayed between root nodes.|
this.treeViewAdv1.ShowLines = false;
Me.treeViewAdv1.ShowLines = False
We can display Plus/Minus sign for the parent nodes by setting the property
ShowPlusMinus to True. This will set Plus/Minus sign for all the parent nodes in
We can also set this for nodes using ShowPlusMinus property in the
The nodes in the
TreeViewAdv, even when it is in the expanded state, can still display the Plus sign using the
LoadOnDemand property should be set to true for this feature to be effective.
|ShowPlusMinus||Indicates if the plus or minus sign is visible for the TreeViewAdv.|
|ShowPlusMinus||Indicates if the plus or minus sign is visible for the individual nodes in TreeNodeAdv.|
|ShowPlusOnExpand||Indicates if the plus sign is visible for the expanded TreeNodeAdv.|
this.treeViewAdv1.ShowPlusMinus = false;
Me.treeViewAdv1.ShowPlusMinus = False
We can display CheckBox for all nodes in
TreeViewAdv by setting
ShowCheckBoxes property to True. The CheckBox for individual nodes can also be shown or hidden using
ShowCheckBox property in
|ShowCheckBoxes||Indicates if the checkboxes are visible for all nodes in TreeViewAdv.|
|ShowCheckBox||Indicates if the checkbox is visible for individual nodes in TreeNodeAdv.|
Me.treeViewAdv1.ShowCheckBoxes = False Me.treeNode.ShowCheckBox = True
In the above image we can show check box for India and china node.
The Option Buttons can be displayed for the nodes in the
TreeViewAdv using the
ShowOptionButtons property. We can also show or hide the Option Button for individual nodes using
ShowOptionButton property in the
|ShowOptionButtons||Indicates if the option buttons are visible for all nodes in TreeViewAdv.|
|ShowOptionButton||Indicates if the option button is visible for individual nodes in TreeNodeAdv.|
this.treeViewAdv1.ShowOptionButtons = false; treeNode.ShowOptionButton = true;
Me.treeViewAdv1.ShowOptionButtons = False Me.treeNode.ShowOptionButton = True
In the above image we can show option button for India and china node.
Assigning Active Nodes
ActiveNode holds a currently selected node. By default, it is null.