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

RadMenu Set Fit to Browser

3 Answers 128 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Kaushal
Top achievements
Rank 1
Kaushal asked on 28 Jan 2012, 07:01 AM
Hi,

Here I need to set radmenu fit to screen (browser). Please assist me how can I achieve it? My Menu binding is dynamic from database.

ref. http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/scrolling/defaultcs.aspx

What I have tried (As below):

JavaScript:

<script type="text/javascript">
        function pageLoad() {
            var menu = $find("<%= RadMenu1.ClientID %>");
            debugger;
            var menuWid = getWindowWidth() + "px";
            menu.offsetWidth = menuWid;
            menu._element.offsetParent.clientWidth = menuWid;
            menu._element.offsetParent.scrollWidth = getWindowWidth() - 100 + "px";
            menu.repaint();
        }
        window.onresize = pageLoad;
 
        function getWindowWidth() {
            var windowWidth = 0;
            if (typeof (window.innerWidth) == 'number') {
                windowWidth = window.innerWidth;
            }
            else {
                if (document.documentElement && document.documentElement.clientWidth) {
                    windowWidth = document.documentElement.clientWidth;
                }
                else {
                    if (document.body && document.body.clientWidth) {
                        windowWidth = document.body.clientWidth;
                    }
                }
            }
            return windowWidth;
        }
    </script>

HTML:

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRootItemScroll="true" width="100%"
        EnableRoundedCorners="true">
        <Items>
            <telerik:RadMenuItem Text="Arial" />
            <telerik:RadMenuItem Text="Verdana" />
            <telerik:RadMenuItem Text="Tahoma" />
            <telerik:RadMenuItem Text="Sans-serif" />
            <telerik:RadMenuItem IsSeparator="true" />
            <telerik:RadMenuItem Text="Arial" />
            <telerik:RadMenuItem Text="Arial Black" />
            <telerik:RadMenuItem Text="Arial Narrow" />
            <telerik:RadMenuItem Text="Arial Unicode MS" />
            <telerik:RadMenuItem Text="Bookman Old Style" />
            <telerik:RadMenuItem Text="Bookshelf Symbol 7" />
            <telerik:RadMenuItem Text="Century" />
            <telerik:RadMenuItem Text="Century Gothic" />
            <telerik:RadMenuItem Text="Comic Sans MS" />
            <telerik:RadMenuItem Text="Courier New" />
            <telerik:RadMenuItem Text="Garamond" />
            <telerik:RadMenuItem Text="Georgia" />
            <telerik:RadMenuItem Text="Goudy Old Style" />
            <telerik:RadMenuItem Text="Goudy Stout" />
            <telerik:RadMenuItem Text="Haettenschweiler" />
            <telerik:RadMenuItem Text="Helvetica" />
            <telerik:RadMenuItem Text="Impact" />
            <telerik:RadMenuItem Text="Imprint MT Shadow" />
            <telerik:RadMenuItem Text="Latha" />
            <telerik:RadMenuItem Text="Lucida Console" />
            <telerik:RadMenuItem Text="Lucida Sans" />
            <telerik:RadMenuItem Text="Lucida Sans Typewriter" />
            <telerik:RadMenuItem Text="Lucida Sans Unicode" />
        </Items>
    </telerik:RadMenu>

Thanks & Regards,

Kaushal Jani

3 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 01 Feb 2012, 12:33 PM
Hi Kaushal,

Please, try the 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

I hope it helps.

Greetings,
Peter
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Kaushal
Top achievements
Rank 1
answered on 13 Feb 2012, 06:38 AM
Hi Peter,

Thanks for your response, its appreciated.

As may be I am failed to describe my problem over here. Let me explain again.

I need radmenu with "EnableRootItemScroll = true". Now I have 20 menuitems in menu. What I need to do is, When menu display on screen it adjust as per the browser with above property. I only have root level menu items. I don't have subitems to display for now.
Currently I have assigned 100% width to the radmenu and it goes larger till radmenuitems added which should be in horizontal scrolling once it goes beyond the browser boundary.

Please correct me if I am wrong at any place. Please find attached image with this post.

Code I have tried:

<telerik:RadMenu ID="_5C90215B_8BB8_415C_BEA9_83F2ACB7A4FB" runat="server" EnableRootItemScroll="true"
        EnableScreenBoundaryDetection="true" EnableRoundedCorners="true" EnableShadows="true">
        <Items>
            <telerik:RadMenuItem Text="Active View">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="All">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 1">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 3">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 4">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 5">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 6">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 8">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 9">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 10">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 11">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 12">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 13">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 14">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 15">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 16">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 17">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 18">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 19">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="My Custom View 20">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

Thanks once again, Looking for your response.

Kaushal Jani
0
Peter
Telerik team
answered on 14 Feb 2012, 02:10 PM
Hi Kaushal,

Thank you for elaborating on the requirement. However, for the scrolling functionality, the Width property should be set in pixels not in percents.

Regards,
Peter
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
Menu
Asked by
Kaushal
Top achievements
Rank 1
Answers by
Peter
Telerik team
Kaushal
Top achievements
Rank 1
Share this question
or