Table of Contents style navigation between left and right pane

9 posts, 0 answers
  1. Rob Conley
    Rob Conley avatar
    47 posts
    Member since:
    Sep 2012

    Posted 01 Jun 2009 Link to this post

    If I wanted to navigate the right pane to an Anchor bookmark (#MySection) from a link in the left pane, would I want to use getExtContentElement and then location.hash in javascript?  Or is there a "built-in" Tererik method to do that? I definitely do not want to reload the contents of the page in the process.

    I'm thinking about using a RadTree on the left side, in case that makes any difference.

    Rob
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Jun 2009 Link to this post

    Hello Rob,

     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 provide more detailed explanations about your exact secnario and requirements.


    Kind regards,

    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Jun 2009 Link to this post

    Hello Rob,

     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 provide more detailed explanations about your exact secnario and requirements.


    Kind regards,

    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Rob Conley
    Rob Conley avatar
    47 posts
    Member since:
    Sep 2012

    Posted 03 Jun 2009 Link to this post

    My concern was that the browser might try to download the page again, just to jump to the bookmark. Now the browser should be smarter than that, but I'm still concerned about it. I think I'll do a little reasearch on that. Thanks.
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Jun 2009 Link to this post

    Hello Rob,

    In the code I provided, the browser will not reload the whole page again when you click on a treeview node. However, when you load the external page in the IFRAME, the progress bar of the browser shows that a page is loading but this is actually not the main page but only the one, loaded in the IFRAME. You can test this by debugging the Page_Load event of the main page or by just writing the current time.


    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Kristian
    Kristian avatar
    16 posts
    Member since:
    Jun 2010

    Posted 13 Jul 2010 Link to this post

    I copied this code to test it as a user control. Clicking on the links opens them in a new window and the first node is invisible.
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Jul 2010 Link to this post

    Hi Kristian,

    I am not sure what actually happens on your side and thus I will need to examine a sample demo. Please, prepare such, make sure that it is simple and fully runnable, open a new support ticket and send it to us along with detailed reproduction steps and explanations of the exact actual and desired result and we will do our best to help.

    All the best,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Kristian
    Kristian avatar
    16 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    Hi Svetlina,

    The missing root node was due to a style sheet, and I used <nodetemplate> with a link inside to load external content.

    Thanks!
    -Kristian
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Jul 2010 Link to this post

    Hi Kristian,

    I am glad you were able to resolve the problem. In case you experience any further problems, do not hesitate to contact us again.


    All the best,
    Svetlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017