Creating master page for navigation

4 posts, 0 answers
  1. Joe Contreras
    Joe Contreras avatar
    11 posts
    Member since:
    Jan 2004

    Posted 16 Oct 2013 Link to this post

    Hi,

    I'm having problems creating a master page for site navigation and want to use the Telerik controls.  Can anyone assist on how I can do this?

    This is what I have so far but it's getting confusing and need assistance:

    <form id="form1" runat="server">
           <asp:ScriptManager ID="ScriptManager1" runat="server" />
           <!-- HEADER -->
           <header>
               <telerik:RadSearchBox ID="OMSearch" runat="server" Width="500" DropDownSettings-Height="200px" Skin="Windows7"></telerik:RadSearchBox>
               <br />
               <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Windows7" Width="100%" Height="60" EnableShadows="true" style="top: 3px; left: 5px">
                   <Items>
                       <telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Home" />
                       <telerik:RadMenuItem runat="server" Text="Wish List" />
                       <telerik:RadMenuItem runat="server" Text="Login" />
                       <telerik:RadMenuItem runat="server" Text="Shopping Cart" />                 
                   </Items>
               </telerik:RadMenu>     
           </header>
           <!-- LEFT NAV -->
           <aside>
               <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Windows7" Width="150px">
                   <Items>
                       <telerik:RadPanelItem Text="Products" Expanded="True">
                        <Items>
                               <telerik:RadPanelItem Text="Order From History" />
                               <telerik:RadPanelItem Text="Quick Entry" />
                               <telerik:RadPanelItem Text="Formularies" />
                               <telerik:RadPanelItem Text="My Mail" />
                               <telerik:RadPanelItem Text="Product Lookups" />                           
                           </Items>
                       </telerik:RadPanelItem>
                       <telerik:RadPanelItem Text="Specialties" Expanded="false">
                           <Items>
                               <telerik:RadPanelItem Text="Sales & Promotions" />
                               <telerik:RadPanelItem Text="Preferred Brands" />
                               <telerik:RadPanelItem Text="Catalog Request" />                         
                           </Items>
                       </telerik:RadPanelItem>
                       <telerik:RadPanelItem Text="Manufacturers">
                           <Items>
                               <telerik:RadPanelItem Text="My Contacts" />
                               <telerik:RadPanelItem Text="Address Cards" />
                               <telerik:RadPanelItem Text="Phone List" />
                               <telerik:RadPanelItem Text="Shared Contacts" />
                           </Items>
                       </telerik:RadPanelItem>
                       <telerik:RadPanelItem Text="Resource Center">
                           <Items>
                               <telerik:RadPanelItem Text="My Contacts" />
                               <telerik:RadPanelItem Text="Address Cards" />
                               <telerik:RadPanelItem Text="Phone List" />
                               <telerik:RadPanelItem Text="Shared Contacts" />
                           </Items>
                       </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Specialty Sites">
                           <Items>
                               <telerik:RadPanelItem Text="My Contacts" />
                               <telerik:RadPanelItem Text="Address Cards" />
                               <telerik:RadPanelItem Text="Phone List" />
                               <telerik:RadPanelItem Text="Shared Contacts" />
                           </Items>
                       </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="My Account">                       
                       </telerik:RadPanelItem>
                   </Items>
               </telerik:RadPanelBar>
           </aside>       
           <!-- CONTENT -->
           <section id="main">
               <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
               </asp:ContentPlaceHolder>
           </section>      
           <!-- FOOTER -->
           <div id="footerWrap">
               WebSite Footer Goes Here
           </div>
       </form>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Oct 2013 Link to this post

    Hello Joe,

    Can you please clarify what is the specific issue that you are currently getting with the RadControls? Do you get any exception or a styling issue?

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. Joe Contreras
    Joe Contreras avatar
    11 posts
    Member since:
    Jan 2004

    Posted 21 Oct 2013 Link to this post

    Hi,

    I need guidance on setting up or aligning menus with the search box as an example.  I'm trying to build an e-commerce site however your sample site does not work.

    Regards,
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Oct 2013 Link to this post

    Hi Joe,

    One approach that you can use is to place the different controls in div elements and position them as desired. For example you can set the desired styles as float or width and get the needed look. Here is some basic example that can help you get started.
    <div style="float:left; width:500px">
             <telerik:RadSearchBox ID="OMSearch" runat="server" Width="500" DropDownSettings-Height="200px" Skin="Windows7" ></telerik:RadSearchBox>
            </div>
          <div style="float:left;width:700px">
             <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Windows7" Width="100%" Height="60" EnableShadows="true" style="top: 3px; left: 5px">
                 <Items>
                     <telerik:RadMenuItem runat="server" NavigateUrl="~/Default.aspx" Text="Home" />
                     <telerik:RadMenuItem runat="server" Text="Wish List" />
                     <telerik:RadMenuItem runat="server" Text="Login" />
                     <telerik:RadMenuItem runat="server" Text="Shopping Cart" />                
                 </Items>
             </telerik:RadMenu>    
       </div>


    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top