Community & Support
Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / TreeView / Showing Radmultipage pages from RadTreeView

Showing Radmultipage pages from RadTreeView

Article Info

Rating: 4

Article information

Article relates to

RadTabStrip v3.x "classic"
RadTreeView v6.x "classic"

RadTabStrip for ASP.NET AJAX
RadTreeView for ASP.NET AJAX
(Telerik.Web.UI 2008.1.x)

Created by

Stephen, Telerik

Last modified

April 03, 2008

Last modified by

Paul, Telerik

HOW-TO
Show/switch pages of RadMultipage from RadTreeView


SOLUTION
First, you can keep integer values in the Value property of the treeview nodes for indexing the pages in the multipage. Then you can hook the OnClientNodeClicking event of the treeview control and get the client side object of the RadMultipage. Finally, you can invoke the set_selectedIndex client method of the multipage passing as a parameter the value of the clicked node.

Below are the code details of a simple example:

ASPX:

<form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager> 
      
    <script type="text/javascript">  
    function HandleClick(sender, eventArgs)  
    {  
        var node = eventArgs.get_node();  
      
        if(node.get_parent() != node.get_treeView())  
        {  
            var multipage = $find("<%=RadMultiPage1.ClientID%>");  
            multipage.set_selectedIndex(parseInt(node.get_value()));  
        }  
    }  
    </script> 
      
    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientNodeClicking="HandleClick">  
    </telerik:RadTreeView> 
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server">  
        <telerik:RadPageView ID="RadPageView1" runat="server">  
            RadPageView1</telerik:RadPageView> 
        <telerik:RadPageView ID="RadPageView2" runat="server">  
            RadPageView2</telerik:RadPageView> 
        <telerik:RadPageView ID="RadPageView3" runat="server">  
            RadPageView3</telerik:RadPageView> 
    </telerik:RadMultiPage> 
</form> 

Code-behind:

protected void Page_Load(object sender, EventArgs e)  
{  
    RadTreeView1.LoadContentFile("tree.xml");  
} 

tree.xml

<Tree> 
  <Node Text="root">  
    <Node Text="Page 1" Value="0" /> 
    <Node Text="Page 2" Value="1" /> 
    <Node Text="Page 3" Value="2" /> 
  </Node> 
</Tree> 


SOLUTION
First, you can keep integer values in the Value property of the treeview nodes for indexing the pages in the multipage. Then you can hook the BeforeClientClick event of the treeview control and get the client side object of the Radmultipage. Finally, you can invoke the SelectedPageByIndex client method of the multipage passing as a parameter the value of the clicked node.

Below are the code details of a simple example:

ASPX:

<form id="form1" runat="server">  
 
    <script type="text/javascript">  
    function HandleClick(node)  
    {  
        if(node.Parent != null)  
        {  
            var multipage = <%=RadMultiPage1.ClientID%>;  
            multipage.SelectPageByIndex(parseInt(node.Value));  
        }  
    }  
    </script> 
 
    <rad:RadTreeView ID="RadTreeView1" runat="server" BeforeClientClick="HandleClick" ContentFile="tree.xml" Height="123px" Width="124px">  
    </rad:RadTreeView> 
    <rad:RadMultiPage ID="RadMultiPage1" runat="server">  
        <rad:PageView ID="PageView1" runat="server" Width="100%" Style="position: relative">  
            PageView1</rad:PageView> 
        <rad:PageView ID="PageView2" runat="server" Width="100%">  
            PageView2</rad:PageView> 
        <rad:PageView ID="PageView3" runat="server" Width="100%">  
            PageView3</rad:PageView> 
    </rad:RadMultiPage> 
</form> 

tree.xml

<Tree> 
  <Node Text="root">  
    <Node Text="Page 1" Value="0" /> 
    <Node Text="Page 2" Value="1" /> 
    <Node Text="Page 3" Value="2" /> 
  </Node> 
</Tree> 

     

Comments

  • Mahesh , May 12, 2008

    Hi, this very useful to make control like tab strip.

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.