Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Menu > RadMenu Design

• Bader Master

  Posted on May 2, 2011 (permalink)

  Hello,
  
  I have two problems with radmenu control
  Here is my code:
  

  <style type="text/css">

          div.RadMenu .rmItem .rmLink .rmLeftImage, 

          div.RadMenu .rmItem .rmLink, 

          div.RadMenu .rmLink .rmText 

          { 

               

              float:right;

          } 

      </style>

    

    

  the control:

    

  <telerik:RadMenu ID="HederRadMenu" runat="server" EnableEmbeddedSkins="false"  Skin="HeaderMnu" Width="952px" >

                      </telerik:RadMenu>

    

                      <telerik:RadScriptBlock ID="dddd" runat="server">

                      <script type="text/javascript">

                           function JustifyMenu ()

                           {

                             var menu = <%=HederRadMenu.ClientID%>;

                             var width = menu.DomElement.offsetWidth;

                             var singleItemLength = Math.floor(width/menu.Items.length)-1+"px";

                            // due to incorrect rounding;

                            // You may need to subtract a larger number depending on

                            // the skin that you are using.

    

                             for (var i = 0; i < menu.Items.length; i ++)

                             {

                                var li = menu.Items[i].DomElement;

                                li.style.width = singleItemLength;

                              }

                            }

                            window.onresize = window.onload = JustifyMenu;

                          </script>

                      </telerik:RadScriptBlock>

  
  The items are displayed using the follwong xml and c# code:
  

  <?xml version="1.0" encoding="utf-8" ?>

  <Menu>

    <Item Text="בחר קטגוריה ראשית" Visible="false" NavigateUrl=""></Item>

    <Item Text="דף ראשי"  Font-Size="X-Large" NavigateUrl="~/Default.aspx" ></Item>

    <Item Text="מסלולים" NavigateUrl="~/Pages/Tracks.aspx" ></Item>

    <Item Text="טיולים מודרכים" NavigateUrl="~/Pages/Tracks.aspx" ></Item>

    <Item Text="טיול החודש" NavigateUrl="~/Pages/PrintingOnProducts/Default.aspx" ></Item>

    <Item Text="טעימות" NavigateUrl="~/Pages/PrintingOnProducts/Default.aspx" ></Item>

    <Item Text="גלריה" NavigateUrl="~/Pages/PrintingOnProducts/Default.aspx" ></Item>

    <Item Text="אתרים" NavigateUrl="~/Pages/PrintingOnTShirts.aspx" ></Item>

    <Item Text="אודות" NavigateUrl="~/Pages/Dfos/Default.aspx" ></Item>

    <Item Text="צור קשר" NavigateUrl="~/Pages/ContactUs.aspx" ></Item>

  </Menu>

  
  and
  
  

  if (!Page.IsPostBack)

         {

             HederRadMenu.LoadContentFile("~/Common/xml/HeaderMenu.xml");

         }

  
  
  
  1)  As you can see I use a custom skin called "HeaderMnu".. The problem is how can chnage the height of the rad menu to 50px. I mean that all radmenu items must be displayed in 50px height.
  
  2) For unknown reason the stretch function is not working.
  
  Please, I need you help in order to solve the above problems.
  It is apprecitaed to send me the modified code and explaination.
  
  Regards,
  Bader

• Peter Peter

  Posted on May 9, 2011 (permalink)

  Hello Bader,
  
  It looks like you are using RadMenu for ASP.NET AJAX while you have applied the solution for the classic RadMenu. Please, use the first approach from this kb article -
  http://www.telerik.com/support/kb/aspnet-ajax/menu/how-to-stretch-the-menu-items-to-fill-the-entire-width-of-the-menu.aspx
  
  You can specify the height of the menu items directly in the xml file:
  

  <?xml version="1.0" encoding="utf-8" ?>

  <Menu>

    <Item Text="בחר קטגוריה ראשית" Visible="false" NavigateUrl="" Height="50px"></Item>

    <Item Text="דף ראשי"  Font-Size="X-Large" NavigateUrl="~/Default.aspx" Height="50px"></Item>

    <Item Text="מסלולים" NavigateUrl="~/Pages/Tracks.aspx" Height="50px"></Item>

    <Item Text="טיולים מודרכים" NavigateUrl="~/Pages/Tracks.aspx" Height="50px"></Item>

    <Item Text="טיול החודש" NavigateUrl="~/Pages/PrintingOnProducts/Default.aspx" Height="50px"></Item>

    <Item Text="טעימות" NavigateUrl="~/Pages/PrintingOnProducts/Default.aspx" Height="50px"></Item>

    <Item Text="גלריה" NavigateUrl="~/Pages/PrintingOnProducts/Default.aspx" Height="50px"></Item>

    <Item Text="אתרים" NavigateUrl="~/Pages/PrintingOnTShirts.aspx" Height="50px"></Item>

    <Item Text="אודות" NavigateUrl="~/Pages/Dfos/Default.aspx" Height="50px"></Item>

    <Item Text="צור קשר" NavigateUrl="~/Pages/ContactUs.aspx" Height="50px"></Item>

  </Menu>

  
  Alternative solution is to handle ItemDataBound and set the Height property dynamically for e.Item.Height.
  
  Kind regards,
  Peter
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Menu > RadMenu Design