RadNavigation with RadPageView

8 posts, 0 answers
  1. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 27 Feb 2015 Link to this post

    Is there a way to use the RadNavigation to select a page in RadPageView to be displayed? 
  2. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 02 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 03 Mar 2015 in reply to Plamen Link to this post

    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















  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 04 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 04 Mar 2015 in reply to Plamen Link to this post

    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:

  7. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 06 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 06 Mar 2015 in reply to Plamen Link to this post

    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>
  9. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 09 Mar 2015 Link to this post

    Hello,

    Thank you for sharing your solution. 

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017