Having trouble getting help?
Contact Support
Contact Support
Server Side Events
10 May 201614 minutes to read
You can specify the server side events of TreeView in ASP.NET. To set server side event, you can enable any of the following events.
|
Event |
Event Description |
Event Description |
| OnNodeChecked | Occurs when treeView node checkbox is checked. |
Event Argument contains parameters are e.NodeText - Text of TreeView Selected Node e.NodeID - Id of TreeView Selected Node e.Checked - Status of TreeView Node Checkbox e.CurrentCheckedNodes - List of TreeView Current Checked Nodes e.EventType - Event Name e.Arguments - Contain keys and values for NodeText,NodeID,Checked and CurrentCheckedNodes |
| OnNodeDropped | Occurs when treeView node is dropped. |
Event Argument contains the following parameters. e.NodeText - Text of TreeView Selected Node e.NodeID - Id of TreeView Selected Node e.TargetNodeDetails –Drop the selected node e.TargetNodeDetails.id- Id of DragElement TargetNodeDetails.NodeDetails-Contain keys and values for DragElement TargetNodeDetails.TargetId-Id of TargetElement TargetNodeDetails.TargetNodeDetails-Contain keys and values for TargetElement e.EventType - Event Name e.Arguments - Contain keys and values for NodeText, NodeID and TargetNodeDetails |
| OnNodeSelected | Occurs when treeView node is selected |
Event Argument contains parameters are e.NodeText - Text of TreeView Selected Node e.NodeID - Id of TreeView Selected Node e.EventType - Event Name e.Arguments - Contain keys and values for NodeText and NodeID. |
| OnInlineEditValidation | Occurs when treeView node is editing. |
Event Argument contains the following parameters e.NodeText - Text of TreeView Selected Node e.NodeID - Id of TreeView Selected Node e.RenamedNode - Edit the selected node RenamedNode.id-Id of edited node RenamedNode.old-Text value of before edited node RenamedNode.new-Text value of after edited node e.EventType - Event Name e.Arguments - Contain keys and values for NodeText, NodeID and RenamedNode |
In the ASPX page, add the following button elements to configure TreeView events
<%--Add server side event for TreeView control as follows--%>
<ej:TreeView
ID="treeview"
runat="server"
Height="300px"
Width="400px"
ShowCheckbox="true"
OnNodeChecked="treeview_NodeChecked"
OnNodeSelected="treeView_NodeSelected"
OnNodeDropped="treeView_NodeDropped"
OnInlineEditValidation="treeView_InlineEditValidation"
AllowDragAndDrop="true"
AllowDropChild="true"
AllowDropSibling="true"
AllowEditing="true">
<Nodes>
<ej:TreeViewNode Expanded="True" Text="Artwork">
<Nodes>
<ej:TreeViewNode Text="Abstract">
<Nodes>
<ej:TreeViewNode Text="2 Acrylic Mediums"></ej:TreeViewNode>
<ej:TreeViewNode Text="Creative Acrylic"></ej:TreeViewNode>
<ej:TreeViewNode Text="Modern Painting"></ej:TreeViewNode>
<ej:TreeViewNode Text="Canvas Art"></ej:TreeViewNode>
<ej:TreeViewNode Text="Black white"></ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
<ej:TreeViewNode Text="Children">
<Nodes>
<ej:TreeViewNode Text="Preschool Crafts"></ej:TreeViewNode>
<ej:TreeViewNode Text="School-age Crafts"></ej:TreeViewNode>
<ej:TreeViewNode Text="Fabulous Toddler"></ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
<ej:TreeViewNode Text="Comic / Cartoon">
<Nodes>
<ej:TreeViewNode Text="Batman"></ej:TreeViewNode>
<ej:TreeViewNode Text="Adventures of Superman"></ej:TreeViewNode>
<ej:TreeViewNode Text="Super boy"></ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
<ej:TreeViewNode Expanded="True" Text="Books">
<Nodes>
<ej:TreeViewNode Text="Comics">
<Nodes>
<ej:TreeViewNode Text="The Flash"></ej:TreeViewNode>
<ej:TreeViewNode Text="Human Target"></ej:TreeViewNode>
<ej:TreeViewNode Text="Birds of Prey"></ej:TreeViewNode>
<ej:TreeViewNode Text="Canvas Art"></ej:TreeViewNode>
<ej:TreeViewNode Text="Black white"></ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
<ej:TreeViewNode Text="Entertaining"></ej:TreeViewNode>
<ej:TreeViewNode Text="Design"></ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
<ej:TreeViewNode Text="Music">
<Nodes>
<ej:TreeViewNode Text="Classical">
<Nodes>
<ej:TreeViewNode Text="Avant-Garde"></ej:TreeViewNode>
<ej:TreeViewNode Text="Medieval"></ej:TreeViewNode>
<ej:TreeViewNode Text="Orchestral"></ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
<ej:TreeViewNode Text="Mass"></ej:TreeViewNode>
<ej:TreeViewNode Text="Folk"></ej:TreeViewNode>
</Nodes>
</ej:TreeViewNode>
</Nodes>
</ej:TreeView>In the code behind page, configure the server side events of TreeView
protected void treeView_NodeChecked(object sender, Syncfusion.JavaScript.Web.TreeViewEventArgs e)
{
//e.NodeText – Text value of selected node
//e.NodeID – Id of selected node
//e.Checked – Status of treeview node checkbox
//e.CurrentCheckedNodes – List of treeview current checked nodes
//e.EventType – Event Name
//e.Arguments – Contain keys and values for NodeText,NodeID,Checked and CurrentCheckedNodes
}
protected void treeView_NodeSelected(object sender, Syncfusion.JavaScript.Web.TreeViewEventArgs e)
{
//e.NodeText – Text value of selected node
//e.NodeID – Id of selected node
//e.EventType – Event Name
//e.Arguments – Contain keys and values for NodeText and NodeID
}
protected void treeView_NodeDropped(object sender, Syncfusion.JavaScript.Web.TreeViewEventArgs e)
{
//e.NodeText – Text value of selected node
//e.NodeID – Id of selected node
//e.TargetNodeDetails – Drop the selected node
//e.EventType – Event Name
//e.Arguments – Contain keys and values for NodeText,NodeID and TargetNodeDetails
}
protected void treeView_InlineEditValidation(object sender, Syncfusion.JavaScript.Web.TreeViewEventArgs e)
{
//e.NodeText – Text value of selected node
//e.NodeID – Id of selected node
//e.RenamedNode – Edit the selected node
//e.EventType – Event Name
//e.Arguments – Contain keys and values for NodeText,NodeID and RenamedNode
}