RadMenu Set Fit to Browser

4 posts, 0 answers
  1. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 28 Jan 2012 Link to this post

    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
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 01 Feb 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 13 Feb 2012 Link to this post

    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
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 14 Feb 2012 Link to this post

    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 >>
Back to Top