TreeView - Server-side Events

  • Books
    • Arts
    • Biographies
    • Children's Books
    • Cooking
    • History
    • Fiction
    • Mystery
    • Nonfiction
    • Romance
    • Science Fiction
    • Travel
  • Music
  • Movies
  • Software

Event log

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadTreeView introduces several server-side events for working with nodes:

  • NodeClick occurs when the user clicks one of the tree nodes
  • NodeDrop occurs when a node is dragged and dropped
  • NodeCheck  occurs when the user checks or un-checks a node checkbox
  • NodeDataBound occurs when a node is bound to data
  • NodeEdit occurs when the user clicks twice on the node or presses F2 to cause a node to be edited
  • NodeExpand occurs when node is expanded to display child nodes
  • NodeCollapse occurs when a node is collapsed to hide child nodes
  • NodeCreated occurs when a node is first created
  • ContextMenuItemClick occurs when a context menu item is clicked

This example shows how the NodeClick, NodeExpand and NodeCollapse events can be wired up.

As soon as the NodeClick event is wired, a postback will appear. You can disable the postback for a node by setting its PostBack property to false.

Please review the source code of this example for additional details.

  1. Click a tree node to trigger the NodeClick event
  2. Expand a tree node to trigger the NodeExpand event
  3. Collapse a tree node to trigger the NodeCollapse event
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="TreeView.Examples.Programming.ServerSideApi.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="EventLogConsole1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-thin">
        <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" Height="420px" Width="100%" 
            EnableDragAndDrop="true" OnNodeClick="RadTreeView1_NodeClick" OnNodeCollapse="RadTreeView1_NodeCollapse"
            OnNodeExpand="RadTreeView1_NodeExpand" OnNodeDrop="RadTreeView1_NodeDrop">
            <Nodes>
                <telerik:RadTreeNode Text="Books" ExpandMode="ServerSide" Expanded="true">
                    <Nodes>
                        <telerik:RadTreeNode Text="Arts">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Biographies">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Children's Books">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Cooking">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="History">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Fiction">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Mystery">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Nonfiction">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Romance">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Science Fiction ">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Travel">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Music" ExpandMode="ServerSide">
                    <Nodes>
                        <telerik:RadTreeNode Text="Alternative">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Blues">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Children's Music">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Classical">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Country">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Dance">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Folk ">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Hard Rock">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Jazz">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Soundtracks">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Movies" ExpandMode="ServerSide">
                    <Nodes>
                        <telerik:RadTreeNode Text="Action">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Animation">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Classics">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Comedy">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Documentary">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Drama">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Horror">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Musicals">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Mystery">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Westerns">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Software" ExpandMode="ServerSide">
                    <Nodes>
                        <telerik:RadTreeNode Text="Database">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Networking">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Presentation">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Project Management">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Reports">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Spreadsheet">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Word Processing">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    <qsf:EventLogConsole runat="server" ID="EventLogConsole1"></qsf:EventLogConsole>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?