RadNavigation with RadPageView

[Jerry Jansen]

Is there a way to use the RadNavigation to select a page in RadPageView to be displayed? 

[Plamen]

Hello Jerry,

One possible way to achieve similar behavior is from the client side. Here is that code that worked correctly at my side:

<script type="text/javascript">

        function OnClientNodeClicked(sender, args) {
            var multipage = $find("RadMultiPage1");
            multipage.set_selectedIndex(1);
        }
    </script>

    <telerik:RadNavigation ID="RadNavigation4" runat="server" OnClientNodeClicked="OnClientNodeClicked">
        <Nodes>
            <telerik:NavigationNode Text="Home">
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Products">
            </telerik:NavigationNode>
        </Nodes>
    </telerik:RadNavigation>

    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" >
        <telerik:RadPageView runat="server" ID="RadPageView1" Height="300" Width="300">
            first
        </telerik:RadPageView>
          <telerik:RadPageView runat="server" ID="RadPageView2" Height="300" Width="300">
            second
        </telerik:RadPageView>
    </telerik:RadMultiPage>

Hope this will help you.

Regards,
Plamen
Telerik

 

 

[Jerry Jansen]

Thanks Plamen, I am actually using masterpages so I changed the javascript in your test page to:

<script type="text/javascript">
    function OnClientNodeClicked(sender, args) {
        var multipage = $find("<%=RadMultiPage1.ClientID %>");
        var clickedNodeText = args.get_node().get_text();
        //alert("You clicked on node: " + clickedNodeText);
        if (clickedNodeText === "Home") {
            multipage.set_selectedIndex(0);
        }
        if (clickedNodeText === "Products") {
            multipage.set_selectedIndex(1);
        }
    }
</script>

I am using the glow skin and set the first node as selected="true". The problem I have is that when I click on the second node then it is highlighted like it is supposed to do but the first node stays highlighted also. Is there a way in javascript to deselect the first node when the second node is clicked?

Thanks


d

[Plamen]

Hi Jerry ,

I have tested the scenario described but it worked correctly at my side. Here is a video of my test.

Would you please review it and elaborate a little bit what else should be done to replicate the issue and be more helpful with a possible solution?

Regards,
Plamen
Telerik

 

 

[Jerry Jansen]

Thanks Plamen but you forgot to set the "Home" as Selected="True" in the code. Then you will see how the Home is highlighted at first, then when you click on Products it is highlighted but Home is also still highlighted. Another problem I found is that if you click on Products as I said it gets highlighted but if you click on Products a second time (without clicking Home) then it gets deselected. However, after clicking several times then operates like it should except for clicking the same link twice in a row. See my video here:

[Plamen]

Hi Jerry,

Here is the code that worked correctly at my side:

function OnClientNodeClicked(sender, args) {
              var multipage = $find("<%=RadMultiPage1.ClientID %>");
              var clickedNodeText = args.get_node().get_text();

              if (clickedNodeText === "Home") {
                  multipage.set_selectedIndex(0);
              }
              if (clickedNodeText === "Products") {
                  $find("RadNavigation4").get_firstNode().set_selected(false);
                  multipage.set_selectedIndex(1);
              }
          }

Hope this will help you solve the issue.

Regards,
Plamen
Telerik

 

 

[Jerry Jansen]

Thanks Plamen, that fixed my problem. I also found a fix for clicking the same node twice, as it would not be highlighted on the second click, by adding args.get_node().set_selected(true); to the javascript code. Here is my code for the test page (again I am using master pages and I am setting the first node [Selected="True"]):

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        function OnClientNodeClicked(sender, args) {
            var multipage = $find("<%=RadMultiPage1.ClientID %>");
            var clickedNodeText = args.get_node().get_text();
            //alert("You clicked on node: " + clickedNodeText);
            args.get_node().set_selected(true);
            if (clickedNodeText === "Home") {
                multipage.set_selectedIndex(0);
            }
            if (clickedNodeText === "Products") {
                $find("<%=RadNavigation4.ClientID%>").get_firstNode().set_selected(false);
                multipage.set_selectedIndex(1);
            }
        }
    </script>
    <telerik:RadNavigation ID="RadNavigation4" runat="server" OnClientNodeClicked="OnClientNodeClicked" Skin="Glow">
        <Nodes>
            <telerik:NavigationNode Text="Home" Selected="True">
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Products">
            </telerik:NavigationNode>
        </Nodes>
    </telerik:RadNavigation>
 
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" >
        <telerik:RadPageView runat="server" ID="RadPageView1" Height="300" Width="300">
            first
        </telerik:RadPageView>
          <telerik:RadPageView runat="server" ID="RadPageView2" Height="300" Width="300">
            second
        </telerik:RadPageView>
    </telerik:RadMultiPage>
</asp:Content>

[Plamen]

Hello,

Thank you for sharing your solution. 

Regards,
Plamen
Telerik