Rank 1
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" /> <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
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,
Yana
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.
Rank 1
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.