[Solved] Creating master page for navigation

[Joe Contreras]

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>

[Kate]

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

[Joe Contreras]

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,

[Kate]

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