navigate to section of a page

2 posts, 1 answers
  1. L
    L avatar
    297 posts
    Member since:
    Apr 2008

    Posted 15 Mar 2016 Link to this post

    hi 

    How do i make the navigate url to link to a section of a page? I try using the code below but is not working. Here is what i want to accomplish using RadPanelBar instead of anchor tag http://www.echoecho.com/htmllinks08.htm. Thanks a lot

    <telerik:RadPanelItem runat="server" Text="Customers">
                <Items>
                    <telerik:RadPanelItem runat="server" NavigateUrl="#customer" Text="View Customers">
                    </telerik:RadPanelItem>
                </Items>
    </telerik:RadPanelItem>

     

     <div class="panel panel-primary" style="margin-right:5px;margin-top:2px">
             <div class="panel-heading" id="customer">
                <h3 class="panel-title">Customer</h3>
             </div>
              <div class="panel-body">
                <h4>How to use View Customers</h4>
                  <hr />
                  <p></p>
              </div>
    </div>

  2. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 18 Mar 2016 Link to this post

    Hello,

    In order to navigate to a specific section of the page the NavigateUrl of the panelbar item should point to the id of the h3 element, and not to the id of a div element, as it is in the current case.
    <asp:ScriptManager runat="server" />
           <telerik:RadPanelBar ID="RadPanelBar" runat="server">
               <Items>
                   <telerik:RadPanelItem runat="server" Text="Customers">
                       <Items>
                           <telerik:RadPanelItem runat="server" NavigateUrl="#customer" Text="View Customers">
                           </telerik:RadPanelItem>
                       </Items>
                   </telerik:RadPanelItem>
               </Items>
           </telerik:RadPanelBar>
     
           <div class="panel panel-primary" style="margin-right: 5px; margin-top: 1000px">
               <div class="panel-heading">
                   <h3 class="panel-title" id="customer">Customer</h3>
               </div>
               <div class="panel-body">
                   <h4>How to use View Customers</h4>
                   <hr />
                   <p></p>
               </div>
           </div>


    Regards,
    Dimitar Terziev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top