Community & Support
Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Menu / How to make the last root item stretch to the entire width of the the browser

How to make the last root item stretch to the entire width of the the browser

Article Info

Rating: Not rated

Article information

Article relates to

 RadMenu for ASP.NET AJAX

Created by

 Peter, Telerik    

Last modified

 October 13, 2008

Last modified by

 Peter, Telerik

HOW TO

Make the last menu item stretch to the entire width of the browser.

DESCRIPTION

Using RadMenu's Client API, I set the width of the last menu item in the OnClientLoad event handler of the menu. Also, I handle the window's onresize event to adjust the width as necessary. Here is a sample of what the result looks like:
 
last item width set on client

SOLUTION

<telerik:RadMenu ID="RadMenu1" Width="100%"
OnClientLoad="OnClientLoadHandler" runat="server">
<Items>
    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
    </telerik:RadMenuItem>
    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
    </telerik:RadMenuItem>
    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
    </telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
 

<script type="text/javascript">     
    var lastItem = null;     
    var menu = null;     
    var widthOfMenu = 0;     
    var widthOfRootItemsButLastOne = 0;     
    var desiredWidthOfLastItem = 0;     
    function OnClientLoadHandler(sender)     
    {                       
        menu = sender;     
        var lastItemIndex = sender.get_items().get_count() - 1; //0 based indexing     
        lastItem = sender.get_items().getItem(lastItemIndex);     
             
        for (var i = 0; i < lastItemIndex; i++)     
        {     
           widthOfRootItemsButLastOne += sender.get_items().getItem(i).get_linkElement().offsetWidth;     
        }     
            
        widthOfMenu = sender.get_element().offsetWidth;     
        desiredWidthOfLastItem = widthOfMenu - widthOfRootItemsButLastOne -4;//-4 to compensate for padding     
             
             
        lastItem.get_element().style.width = desiredWidthOfLastItem+"px";     
                 
    }     
         
     function AdjustLastItemWidthOnResize ()     
     {         
       widthOfMenu = menu.get_element().offsetWidth;     
       desiredWidthOfLastItem = widthOfMenu - widthOfRootItemsButLastOne -4;//-4 to compensate for padding     
       lastItem.get_element().style.width = desiredWidthOfLastItem+"px";     
          
     }     
    window.onresize = AdjustLastItemWidthOnResize;     
    </script>     
 



Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.