This is a migrated thread and some comments may be shown as answers.

Automatic horizontal scroll on RadMenu when window is resized

3 Answers 379 Views

This is a migrated thread and some comments may be shown as answers.

Hans Milling asked on 08 Jan 2010, 10:27 AM

radmenuwrap.gif

radmenuscroll.gif

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;  
        
            oMenu.style.width = width;  
        
            var oScrollDiv = oMenu.firstChild;  
        
            oScrollDiv.style.width = 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head id="Head1" runat="server">  
        
                <title></title>  
        
                <style type="text/css">  
        
                 .body, .html, .form   
        
                 {  
        
                   width: 100%;  
        
                   height: 100%;  
        
                 }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <h1> 
        
              <telerik:RadScriptManager Runat="server">  
        
              </telerik:RadScriptManager> 
        
                  Header</h1> 
        
                <table style="width:100%; height:100%">  
        
                  <tr> 
        
                    <td width="100%" id="menutd">  
        
                           <telerik:RadMenu ID="RadMainMenu" runat="server" Skin="Outlook" 
        
                              CollapseAnimation-Duration="10" 
        
                             CollapseDelay="10" CollapseAnimation-Type="None" Font-Bold="true" EnableAutoScroll="true" EnableRootItemScroll="true" width="200px">  
        
                             <CollapseAnimation Duration="10" Type="Linear" /> 
        
                               <Items> 
        
                                <telerik:RadMenuItem Text="Welcome" AccessKey="W">  
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Documents" AccessKey="D">  
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Maps" AccessKey="M">  
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Import" AccessKey="I">  
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Export" AccessKey="E">  
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Tools" AccessKey="T">  
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Login" AccessKey="L">  
        
                                </telerik:RadMenuItem> 
        
                            </Items> 
        
                           </telerik:RadMenu> 
        
                    </td> 
        
                    <td width="1" style="white-space:nowrap;"><input type="text" />&nbsp;<input type="button" value="Search" /></td>  
        
                  </tr> 
        
                  <tr> 
        
                  <td colspan="2">Main site content</td> 
        
                  </tr> 
        
                </table> 
        
                </form> 
        
            </body> 
        
            </html>

Regards Hans Milling

3 Answers, 1 is accepted

answered on 16 Sep 2014, 10:32 AM

autoScroll.zip

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:

set the width property of the Menu to 100% so it will be expanded to its parent wrapper.
add CSS style for clear the RadAjaxPanel element because its child - the RadMenu (in classic render mode) is floated
add Ajax handler if the window has changed width
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.

Regards,
Magdalena
Telerik

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.