Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > How to use splitter

• KS

  Posted on Dec 21, 2010 (permalink)

  I want to open pages linked in left pane in right pane
  
  <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="700" Width="700">
          <telerik:RadPane ID="navigationPane" runat="server" Width="150" Height="700">
             <!- RadTreeView ->
              <telerik:RadTreeView ID="RadTreeView1" runat="server">
              <Nodes>
                  <telerik:RadTreeNode runat="server" Text="Main-Menu" Expanded="true" AllowDrag="false"
                      AllowDrop="false">
                      <Nodes>
                          <telerik:RadTreeNode runat="server" Text="MIS-Reports" AllowDrag="false">
                              <Nodes>
                                  <telerik:RadTreeNode runat="server" Text="Weekend Package" NavigateUrl="Default.aspx" AllowDrop="false" Value="1999">
                                  </telerik:RadTreeNode>
                                  <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="2999">
                                  </telerik:RadTreeNode>
                                  <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="3999">
                                  </telerik:RadTreeNode>
                              </Nodes>
                          </telerik:RadTreeNode>
                          <telerik:RadTreeNode runat="server" Text="Approval-Menu" AllowDrag="false">
                              <Nodes>
                                  <telerik:RadTreeNode runat="server" Text="Weekend Package" NavigateUrl="Default.aspx" AllowDrop="false" Value="1999">
                                  </telerik:RadTreeNode>
                                  <telerik:RadTreeNode runat="server" Text="1 Week Package" AllowDrop="false" Value="2999">
                                  </telerik:RadTreeNode>
                                  <telerik:RadTreeNode runat="server" Text="2 Week Package" AllowDrop="false" Value="3999">
                                  </telerik:RadTreeNode>
                              </Nodes>
                          </telerik:RadTreeNode>
                          
                      </Nodes>
                  </telerik:RadTreeNode>
                  
              </Nodes>
          </telerik:RadTreeView>
          
          <!- RadTreeView ->
          
          </telerik:RadPane>
          <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" />
          <telerik:RadPane ID="contentPane" runat="server" Width="950">
              Right Pane
          </telerik:RadPane>
      </telerik:RadSplitter>
  
  
  Here how can I open "NavigateUrl="Default.aspx" in Right Pane

• Svetlina Anati Svetlina Anati

  Posted on Dec 21, 2010 (permalink)

  Hi KS,

   The property you need to set is called ContentUrl and it can be set in markup, code behind and also on the client through a javascript setter. A sample demo is available below:
  
  http://demos.telerik.com/aspnet-ajax/splitter/examples/externalcontentloading/defaultcs.aspx
  
  I hope that my reply is helpful, in case you need further assistance or you have additional questions, do not hesitate to contact me again, I will be glad to help.

  Greetings,
  Svetlina
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• KS

  Posted on Dec 21, 2010 (permalink)

  How can I get Node click event of RadTreeview
  
  How to catch
  
  <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="700" Width="700">
          <telerik:RadPane ID="navigationPane" runat="server" Width="150" Height="700">
             <!- RadTreeView ->
              <telerik:RadTreeView ID="RadTreeView1" runat="server">
              <Nodes>
                  <telerik:RadTreeNode runat="server" Text="Main-Menu" Expanded="true" AllowDrag="false"
                      AllowDrop="false">
                      <Nodes>
                          <telerik:RadTreeNode runat="server" Text="MIS-Reports" AllowDrag="false">
                              <Nodes>
                                  <telerik:RadTreeNode runat="server" Text="Weekend Package" NavigateUrl="Default.aspx" AllowDrop="false" How to catch Click of this node>

• Svetlina Anati Svetlina Anati

  Posted on Dec 21, 2010 (permalink)

  Hi KS,

   Basically you could use the OnClientNodeClicking event as shown below:

  http://demos.telerik.com/aspnet-ajax/treeview/examples/programming/clientevents/defaultcs.aspx
  
   However, I suggest you to use an easier approach to achieve the desired result - to use the NavigateUrl and Target properties of the treeview as shown below:

    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" VisibleDuringInit=false>  
              <telerik:RadPane ID="navigationPane" runat="server" Width="200">  
                  <telerik:RadTreeView ID="TreeView" runat="server" Style="white-space: normal;">  
                      <Nodes> 
                          <telerik:RadTreeNode runat="server" Text="Google" NavigateUrl="http://www.google.com" Target="contentPane">  
                          </telerik:RadTreeNode> 
                          <telerik:RadTreeNode runat="server" Text="Telerik" NavigateUrl="http://www.telerik.com" Target="contentPane">  
                          </telerik:RadTreeNode> 
                      </Nodes> 
                      <CollapseAnimation Duration="100" Type="OutQuint" /> 
                      <ExpandAnimation Duration="100" /> 
                  </telerik:RadTreeView> 
              </telerik:RadPane> 
              <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" /> 
              <telerik:RadPane ID="contentPane" runat="server" ContentUrl="about:blank">  
              </telerik:RadPane> 
          </telerik:RadSplitter> 

  Please, note that in order to use this approach, you should initially set some ContentUrl to the target RadPane (e.g about:blank or a custom start page) in order to force it to create an IFRAME element. For your convenience I attached a sample demo to the thread.

  In case you do not want to use this approach and you still experience problems, please open a new support ticket and send us a sample reproduction demo along with detailed reproduction instructions.

  Kind regards,
  Svetlina
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• KS

  Posted on Dec 21, 2010 (permalink)

  
  <script type="text/javascript" language="javascript">
  function ClientNodeClicked(sender, eventArgs)
  {
      debugger;
     var node = eventArgs.get_node();
     alert("You clicked " + node.get_text());
     var doEvent = "<%= contentPane.ClientID%>";
     doEvent.ContentUrl = "Default.aspx"; // THIS IS NOT OPENTING THE CONCERN PAGE IN THE RIGHT CONTENT PANE
   
  }
  </script>
  
      <form id="form1" runat="server">
      <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
      <div class="bigModule" style="margin-bottom: 40px">
         
      <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="700" Width="700">
          <telerik:RadPane ID="navigationPane" runat="server" Width="150" Height="700">
             <!- RadTreeView ->
              <telerik:RadTreeView ID="RadTreeView1" OnClientNodeClicked="ClientNodeClicked" runat="server">
              <Nodes>

• Svetlina Anati Svetlina Anati

  Posted on Dec 21, 2010 (permalink)

  Hi KS,

   The demo I previously provided is with teh suggested approach with the target attribute. If you however prefer to use the client API you should use the method SetContentUrl(url) as follows:
  
                  

  <script type="text/javascript" language="javascript">

  function ClientNodeClicked(sender, eventArgs)

  {

      debugger;

     var node = eventArgs.get_node();

     alert("You clicked " + node.get_text());

     var doEvent = "<%= contentPane.ClientID%>";


     doEvent.SetContentUrl("Default.aspx");   

  }

  </script>

  
  
  I hope that my reply helps and I strongly recommend to examine our online documentation in more details - RadSplitter for ASP.NET online help is available below:
  
  http://www.telerik.com/help/aspnet/splitter/radpane%20client%20object.html
  
  Kind regards,
  Svetlina
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > How to use splitter