Class SfTreeView<TValue>
The TreeView component is used to represent hierarchical data in a tree like structure with advanced functions to edit, drag and drop, select with CheckBox and more.
TreeView can be populated from a data source such as an array of data's or from DataManager.
Inheritance
System.Object
Syncfusion.Blazor.SfBaseComponent
SfTreeView<TValue>
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfTreeView<TValue> : SfBaseComponent
Type Parameters
Constructors
SfTreeView()
Declaration
Properties
AllowDragAndDrop
Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
desktop, hold the mouse on the node, drag it to the target node and drop the node by releasing
the mouse. For touch devices, drag and drop operation is performed by touch, touch move
and touch end.
Declaration
public bool AllowDragAndDrop { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
AllowEditing
Enables or disables editing of the text in the TreeView node. When AllowEditing
property is set
to true, the TreeView allows you to edit the node by double clicking the node or by navigating to
the node and pressing F2 key.
Declaration
public bool AllowEditing { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
AllowMultiSelection
Enables or disables multi-selection of nodes. To select multiple nodes:
Select the nodes by holding down the CTRL key while clicking on the nodes.
Select consecutive nodes by clicking the first node to select and hold down the SHIFT key
and click the last node to select.
Declaration
public bool AllowMultiSelection { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
Animation
Specifies the type of animation applied on expanding and collapsing the nodes along with duration.
Declaration
public TreeViewNodeAnimationSettings Animation { get; set; }
Property Value
AutoCheck
Allow us to specify the parent and child nodes to get auto check while we check or uncheck a node.
Declaration
public bool AutoCheck { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
CheckedNodes
The CheckedNodes
property is used to set the nodes that need to be checked or
get the ID of nodes that are currently checked in the TreeView component.
The checkedNodes
property depends upon the value of showCheckBox
property.
Declaration
public string[] CheckedNodes { get; set; }
Property Value
Type |
Description |
System.String[] |
|
CheckedNodesChanged
Specifies the callback to trigger when the checked nodes changes.
Declaration
public EventCallback<string[]> CheckedNodesChanged { get; set; }
Property Value
Type |
Description |
Microsoft.AspNetCore.Components.EventCallback<System.String[]> |
|
CssClass
Specifies the CSS classes to be added with root element of the TreeView to help customize the appearance of the component.
Declaration
public string CssClass { get; set; }
Property Value
Type |
Description |
System.String |
|
Disabled
Specifies a value that indicates whether the TreeView component is disabled or not.
When set to true, user interaction will not be occurred in TreeView.
Declaration
public bool Disabled { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
DropArea
Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted
for the draggable element movement. By default, the draggable element movement occurs in the entire page.
Declaration
public string DropArea { get; set; }
Property Value
Type |
Description |
System.String |
|
EnableHtmlSanitizer
Defines whether to allow the cross-scripting site or not.
Declaration
public bool EnableHtmlSanitizer { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
EnablePersistence
Enables or disables persisting TreeView state between page reloads. If enabled, following APIs will persist.
SelectedNodes
- Represents the nodes that are selected in the TreeView component.
checkedNodes
- Represents the nodes that are checked in the TreeView component.
expandedNodes
- Represents the nodes that are expanded in the TreeView component.
Declaration
public bool EnablePersistence { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
EnableRtl
Enable or disable rendering component in right to left direction.
Declaration
public bool EnableRtl { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
ExpandedNodes
Represents the expanded nodes in the TreeView component. We can set the nodes that need to be
expanded or get the ID of the nodes that are currently expanded by using this property.
Declaration
public string[] ExpandedNodes { get; set; }
Property Value
Type |
Description |
System.String[] |
|
ExpandedNodesChanged
Specifies the callback to trigger when the expanded nodes changes.
Declaration
public EventCallback<string[]> ExpandedNodesChanged { get; set; }
Property Value
Type |
Description |
Microsoft.AspNetCore.Components.EventCallback<System.String[]> |
|
ExpandOn
Specifies the action on which the node expands or collapses. The available actions are,
Click
- The expand/collapse operation happens when you single-click the node in both desktop and mobile devices.
DblClick
- The expand/collapse operation happens when you double-click the node in both desktop and mobile devices.
None
- The expand/collapse operation will not happen when you single-click or double-click the node in both desktop
and mobile devices.
Declaration
public ExpandAction ExpandOn { get; set; }
Property Value
Fields
Specifies the data source and mapping fields to render TreeView nodes.
Declaration
public TreeViewFieldsSettings<TValue> Fields { get; set; }
Property Value
FullRowNavigable
If this property is set to true, then the entire TreeView node will be navigate-able instead of text element.
Declaration
public bool FullRowNavigable { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
FullRowSelect
On enabling this property, the entire row of the TreeView node gets selected by clicking a node.
When disabled only the corresponding node's text gets selected.
Declaration
public bool FullRowSelect { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
HtmlAttributes
Specify the HtmlAttributes for TreeView.
Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type |
Description |
System.Collections.Generic.Dictionary<System.String, System.Object> |
|
ID
Sets id attribute for the treeview element.
Declaration
public string ID { get; set; }
Property Value
Type |
Description |
System.String |
|
LoadOnDemand
By default, the load on demand (Lazy load) is set to true. By disabling this property, all the tree nodes are rendered at the
beginning itself.
Declaration
public bool LoadOnDemand { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
SelectedNodes
Represents the selected nodes in the TreeView component. We can set the nodes that need to be
selected or get the ID of the nodes that are currently selected by using this property.
On enabling AllowMultiSelection
property we can select multiple nodes and on disabling
it we can select only a single node.
Declaration
public string[] SelectedNodes { get; set; }
Property Value
Type |
Description |
System.String[] |
|
SelectedNodesChanged
Specifies the callback to trigger when the selected nodes changes.
Declaration
public EventCallback<string[]> SelectedNodesChanged { get; set; }
Property Value
Type |
Description |
Microsoft.AspNetCore.Components.EventCallback<System.String[]> |
|
ShowCheckBox
Indicates that the nodes will display CheckBoxes in the TreeView.
The CheckBox will be displayed next to the expand/collapse icon of the node.
Declaration
public bool ShowCheckBox { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
sortOrder
Declaration
public SortOrder sortOrder { get; set; }
Property Value
SortOrder
Specifies a value that indicates whether the nodes are sorted in the ascending or descending order,
or are not sorted at all. The available types of sort order are,
None
- The nodes are not sorted.
Ascending
- The nodes are sorted in the ascending order.
Descending
- The nodes are sorted in the ascending order.
Declaration
public SortOrder SortOrder { get; set; }
Property Value
TreeViewTemplates
Specifies the custom item template of TreeView Node item.
Declaration
public TreeViewTemplates<TValue> TreeViewTemplates { get; set; }
Property Value
Methods
AddNodes(List<TValue>, String)
Adds the collection of TreeView nodes based on target and index position. If target node is not specified,
then the nodes are added as children of the given parentID or in the root level of TreeView.
Declaration
public Task AddNodes(List<TValue> nodes, string target = null)
Parameters
Type |
Name |
Description |
System.Collections.Generic.List<TValue> |
nodes |
A list of nodes to be added to the TreeView.
|
System.String |
target |
Based on target nodes are added as children of the given parentID or in the root level of TreeView
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
BeginEdit(String)
Instead of clicking on the TreeView node for editing, we can enable it by using
BeginEdit
property. On passing the node ID or element through this property, the edit textBox
will be created for the particular node thus allowing us to edit it.
Declaration
public Task BeginEdit(string node)
Parameters
Type |
Name |
Description |
System.String |
node |
Specifies ID of TreeView node.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type |
Name |
Description |
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder |
__builder |
|
CheckAll(String[])
Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes
as argument to this method.
Declaration
public Task CheckAll(string[] nodesId = null)
Parameters
Type |
Name |
Description |
System.String[] |
nodesId |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
CollapseAll(String[])
Collapses all the expanded TreeView nodes. You can collapse specific nodes by passing array of nodes as argument to this method.
Declaration
public Task CollapseAll(string[] nodesId = null)
Parameters
Type |
Name |
Description |
System.String[] |
nodesId |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
DisableNodes(String[])
Disables the collection of nodes by passing the ID of nodes or node elements in the array.
Declaration
public Task DisableNodes(string[] nodes)
Parameters
Type |
Name |
Description |
System.String[] |
nodes |
Specifies the array of TreeView nodes ID.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
DropNodeAsChild(String, String, String)
Declaration
public Task DropNodeAsChild(string dragLi, string dropLi, string dragParentLi = null)
Parameters
Type |
Name |
Description |
System.String |
dragLi |
|
System.String |
dropLi |
|
System.String |
dragParentLi |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
DropNodeAsSibling(String, String, String, Nullable<Boolean>, String)
Declaration
public Task DropNodeAsSibling(string dragLi, string dropLi, string dropParentLi, Nullable<bool> pre, string dragParentLi)
Parameters
Type |
Name |
Description |
System.String |
dragLi |
|
System.String |
dropLi |
|
System.String |
dropParentLi |
|
System.Nullable<System.Boolean> |
pre |
|
System.String |
dragParentLi |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
EnableNodes(String[])
Enables the collection of disabled nodes by passing the ID of nodes or node elements in the array.
Declaration
public Task EnableNodes(string[] nodes)
Parameters
Type |
Name |
Description |
System.String[] |
nodes |
Specifies the array of TreeView nodes ID.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
EnsureVisible(String)
Ensures visibility of the TreeView node by using node ID or node element.
When many TreeView nodes are present and we need to find a particular node, EnsureVisible
property
helps bring the node to visibility by expanding the TreeView and scrolling to the specific node.
Declaration
public Task EnsureVisible(string node)
Parameters
Type |
Name |
Description |
System.String |
node |
Specifies ID of TreeView node.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
ExpandAll(String[])
Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes
Declaration
public Task ExpandAll(string[] nodesId = null)
Parameters
Type |
Name |
Description |
System.String[] |
nodesId |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
GetAllCheckedNodes()
Gets all the checked nodes including child, whether it is loaded or not.
Declaration
public Task<List<string>> GetAllCheckedNodes()
Returns
Type |
Description |
System.Threading.Tasks.Task<System.Collections.Generic.List<System.String>> |
|
GetDisabledNodes()
Gets all the disabled nodes including child, whether it is loaded or not.
Declaration
public Task<List<string>> GetDisabledNodes()
Returns
Type |
Description |
System.Threading.Tasks.Task<System.Collections.Generic.List<System.String>> |
|
GetNode(String)
Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
Declaration
public NodeData GetNode(string node)
Parameters
Type |
Name |
Description |
System.String |
node |
Specifies ID of TreeView node.
|
Returns
GetPropertyChanges()
Declaration
protected IDictionary<string, object> GetPropertyChanges()
Returns
Type |
Description |
System.Collections.Generic.IDictionary<System.String, System.Object> |
|
GetRootElement()
Returns the route element reference of the component
Declaration
public ElementReference GetRootElement()
Returns
Type |
Description |
Microsoft.AspNetCore.Components.ElementReference |
|
GetTreeData(String)
To get the updated data source of TreeView after performing some operation like drag and drop, node editing,
node selecting/unSelecting, node expanding/collapsing, node checking/unChecking, adding and removing node.
If you pass the ID of TreeView node as arguments for this method then it will return the updated data source
of the corresponding node otherwise it will return the entire updated data source of TreeView.
The updated data source also contains custom attributes if you specified in data source.
Declaration
public List<TValue> GetTreeData(string node = null)
Parameters
Type |
Name |
Description |
System.String |
node |
Specifies ID of TreeView node.
|
Returns
Type |
Description |
System.Collections.Generic.List<TValue> |
|
MoveNodes(String[], String, Int32, Nullable<Boolean>)
Replaces the text of the TreeView node with the given text.
Declaration
public Task MoveNodes(string[] sourceNodes, string target, int index, Nullable<bool> preventTargetExpand)
Parameters
Type |
Name |
Description |
System.String[] |
sourceNodes |
Specifies the array of TreeView nodes ID.
|
System.String |
target |
Specifies ID of TreeView node.
|
System.Int32 |
index |
Specifies the index to place the moved nodes in the target element.
|
System.Nullable<System.Boolean> |
preventTargetExpand |
If set to true, the target parent node will be prevented from auto expanding.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
OnAfterRenderAsync(Boolean)
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type |
Name |
Description |
System.Boolean |
firstRender |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
Overrides
Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(System.Boolean)
OnInitializedAsync()
Declaration
protected override Task OnInitializedAsync()
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
Overrides
Syncfusion.Blazor.SfBaseComponent.OnInitializedAsync()
Declaration
protected override Task OnParametersSetAsync()
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
Refresh()
Applies all the pending property changes and render the component again.
Declaration
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
RefreshNode(String, List<TValue>)
Replaces the text of the TreeView node with the given text.
Declaration
public Task RefreshNode(string target, List<TValue> newData)
Parameters
Type |
Name |
Description |
System.String |
target |
Specifies ID of TreeView node.
|
System.Collections.Generic.List<TValue> |
newData |
Specifies the new Data of TreeView node.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
RemoveNodes(String[])
Removes the collection of TreeView nodes by passing the array of node details as argument to this method.
Declaration
public Task RemoveNodes(string[] nodes)
Parameters
Type |
Name |
Description |
System.String[] |
nodes |
Specifies the array of TreeView nodes ID.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
TriggerKeyboardEvent(NodeKeyPressEventArgs, String, String, String)
Collapsed Action for TreeView
Declaration
public Task TriggerKeyboardEvent(NodeKeyPressEventArgs args, string id, string keyAction, string keyValue)
Parameters
Type |
Name |
Description |
NodeKeyPressEventArgs |
args |
|
System.String |
id |
|
System.String |
keyAction |
|
System.String |
keyValue |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
TriggerNodeCollapsedEvent(NodeExpandEventArgs)
Collapsed Action for TreeView
Declaration
public Task TriggerNodeCollapsedEvent(NodeExpandEventArgs args)
Parameters
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
TriggerNodeCollapsingEvent(NodeExpandEventArgs)
Collapse Action for TreeView
Declaration
public Task TriggerNodeCollapsingEvent(NodeExpandEventArgs args)
Parameters
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
UncheckAll(String[])
Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes
as argument to this method.
Declaration
public Task UncheckAll(string[] nodesId = null)
Parameters
Type |
Name |
Description |
System.String[] |
nodesId |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
UpdateChildProperties(String, Object)
Declaration
public void UpdateChildProperties(string key, object details)
Parameters
Type |
Name |
Description |
System.String |
key |
|
System.Object |
details |
|
UpdateData(List<TValue>, Boolean)
Update the latest data source values to TreeView component (Drag and drop)
Declaration
public Task UpdateData(List<TValue> dataSource, bool IsUpdateChecked = false)
Parameters
Type |
Name |
Description |
System.Collections.Generic.List<TValue> |
dataSource |
|
System.Boolean |
IsUpdateChecked |
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|
UpdateNode(String, String)
Replaces the text of the TreeView node with the given text.
Declaration
public Task UpdateNode(string target, string newText)
Parameters
Type |
Name |
Description |
System.String |
target |
Specifies ID of TreeView node.
|
System.String |
newText |
Specifies the new text of TreeView node.
|
Returns
Type |
Description |
System.Threading.Tasks.Task |
|