Automatic horizontal scroll on RadMenu when window is resized

4 posts, 0 answers
  1. Hans Milling
    Hans Milling avatar
    1 posts
    Member since:
    Jan 2010

    Posted 08 Jan 2010 Link to this post

    Hi Telerik Forum.

    How do I make the RadMenu automatically scroll when the page is resized and there is not enough room for the menu?
    In my example I have a menu that changes depending on what page you are at, but the menu is also resized with the page.
    When the menu contains too many root elements I would like the scroll bars to automatically appear if the user makes the page too narrow. My problem is, if I enable root scroll, the scroll bars does not appear if no width is set and the menu items are wrapped. See RadMenuWrap.gif.

    If I do set a fixed size, then the menu is not resized with the page. I have tried to make a javascript onresize that resizes the RadMenu div and the child scroll div, but this does not work properly. The script looked like this:

    var oMenu = document.getElementById("RadMainMenu")  
    var oTD = document.getElementById("menutd");  
    var width = oTD.clientWidth; = width;  
    var oScrollDiv = oMenu.firstChild; = width;  

    The menu did resize with the window, but it was like the menu never realized it had been resized and didn't reorder. I tried to call the menu's repaint() method, but still the same.

    I know I could rearrange the menu items into sub menus but this is not an option, please let me know if you have a solution?


    See the following basic example of a page with a menu to use as an example:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    <html xmlns="" > 
    <head id="Head1" runat="server">  
        <style type="text/css">  
         .body, .html, .form   
           width: 100%;  
           height: 100%;  
        <form id="form1" runat="server">  
      <telerik:RadScriptManager Runat="server">  
        <table style="width:100%; height:100%">  
            <td width="100%" id="menutd">  
                   <telerik:RadMenu ID="RadMainMenu" runat="server" Skin="Outlook" 
                     CollapseDelay="10" CollapseAnimation-Type="None" Font-Bold="true" EnableAutoScroll="true" EnableRootItemScroll="true" width="200px">  
                     <CollapseAnimation Duration="10" Type="Linear" /> 
                        <telerik:RadMenuItem Text="Welcome" AccessKey="W">  
                        <telerik:RadMenuItem Text="Documents" AccessKey="D">  
                        <telerik:RadMenuItem Text="Maps" AccessKey="M">  
                        <telerik:RadMenuItem Text="Import" AccessKey="I">  
                        <telerik:RadMenuItem Text="Export" AccessKey="E">  
                        <telerik:RadMenuItem Text="Tools" AccessKey="T">  
                        <telerik:RadMenuItem Text="Login" AccessKey="L">  
            <td width="1" style="white-space:nowrap;"><input type="text" />&nbsp;<input type="button" value="Search" /></td>  
          <td colspan="2">Main site content</td> 

    Regards Hans Milling
  2. Yana
    Yana avatar
    4602 posts

    Posted 11 Jan 2010 Link to this post

    Hi Hans,

    I'm afraid that the needed functionality cannot be achieved - the scrolling arrows are rendered on the server when the width of the items exceed the menu's width and they cannot appear when the page is resized.

    Sincerely yours,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Nick
    Nick avatar
    17 posts
    Member since:
    Feb 2011

    Posted 11 Sep 2014 Link to this post

    So, to rehash this...there's no way to avoid this bad menu wrapping on a window size with the current RadMenu structure?
  4. Magdalena
    Magdalena avatar
    463 posts

    Posted 16 Sep 2014 Link to this post

    Hi Nick,

    There is a quite different rendering for the normal and scrolling menu that comes from the server.
    So if you would like to change a normal menu to scrolling menu or contrary, it is necessary to initiate a post-back to the server in order to load and apply the new rendering. A possible way to achieve this is to initiate a Ajax request that will avoid a full post-back to the server. Please find attached a sample project that implements this approach.
    We would like also explain the different steps:
    1. set the width property of the Menu to 100% so it will be expanded to its parent wrapper.
    2. add CSS style for clear the RadAjaxPanel element because its child - the RadMenu (in classic render mode) is floated
    3. add Ajax handler if the window has changed width
    4. set the width of the RadMenu in the new event to be as its parent element

    We are sending you also this video as a part of the testing.


    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