Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Menu > RadMenu Set Fit to Browser

• Kaushal

  Posted on Jan 28, 2012 (permalink)

  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

  Reply

• Peter Peter

  Posted on Feb 1, 2012 (permalink)

  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

  Reply


• Kaushal

  Posted on Feb 13, 2012 (permalink)

  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

  Attached files

  • 13-02-12-AM-11-03-45.png

  Reply

• Peter Peter

  Posted on Feb 14, 2012 (permalink)

  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 >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Menu > RadMenu Set Fit to Browser