RadMenu Set Fit to Browser

[Kaushal]

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

[Peter]

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

[Kaushal]

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

[Peter]

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