Table of Contents style navigation between left and right pane

[Rob Conley]

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

[Svetlina Anati]

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.

[Svetlina Anati]

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.

[Rob Conley]

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.

[Svetlina Anati]

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.

[Kristian]

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.

[Svetlina Anati]

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

[Kristian]

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

[Svetlina Anati]

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