Dynamic Menu: Need scrolling capability

5 posts, 0 answers
  1. William
    William avatar
    22 posts
    Member since:
    May 2011

    Posted 07 Sep 2011 Link to this post

    Hi Guys,

    I have a dynamic menu being generated and I can not see all the menu items. How do I dynamically setup the scrolling in the RadMenu?

    William
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Sep 2011 Link to this post

    Hello William,

    You could use its group settings and explicitly set height so that the scrollbars appear as described in this demo

    Greetings,
    Kate
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Sep 2011 Link to this post

    Hello William,

    An another approach you can try is setting the GroupSettings Height on Javascript to control the scrolling.
    aspx:
    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Vertical" ClickToOpen="true"
            OnClientLoad="OnClientLoad">
     <Items>
       <telerik:RadMenuItem Text="Text1">
       <Items>
        . . . .
       </Items>
       . . . . .
     </Items>
    </telerik:RadMenu>

    JS:
    <script type="text/javascript">
    function OnClientLoad(sender, eventArgs)
    {
      for (var i = 0; i < 3; i++)
       {
         var rootItem = new Telerik.Web.UI.RadMenuItem();
         rootItem.set_text("New item " + i);
         rootItem.get_groupSettings().set_height("250px");
         sender.get_items().getItem(0).get_items().add(rootItem);
         for (var k = 0; k < 30; k++)
         
           var subItem = new Telerik.Web.UI.RadMenuItem();
           subItem.set_text("Sub Item " + i + " " + k);
           rootItem.get_items().add(subItem);
         }               
       }
    }
    </script>

    Thanks,
    Shinu.
  5. olav
    olav avatar
    10 posts
    Member since:
    Jan 2007

    Posted 31 Oct 2011 Link to this post

    Hi all,

    I followed the demo and added
    <GroupSettings Height="XXXpx"></GroupSettings>

    to the markup.

    Nice, except I get a kind of opposite issue to deal with.
    The height of my menu is apparently static, not looking so good in cases with only a few menu items. (leaving a blank square in the scrolling region below)

    Anybody with an easy way to deal with this?
    Thanks.
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Nov 2011 Link to this post

    Hi Olav,

    I am not quite sure what exactly is your scenario but I could suggest that you try the following approach where the scroll is set according to the number of the child menu items:
     
            <telerik:RadMenu ID="Menu1" runat="server" OnClientItemOpened="itemOpened">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                         </Items>
                        <GroupSettings Height="200px" />
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                    </telerik:RadMenuItem>
                </Items>
           </telerik:RadMenu>

    javascript:
    <script type="text/javascript">
                   function itemOpened(sender, args) {
                   var item = args.get_item();
                   var childCount = item.get_items().get_count();
                   var scrollWrapElement = args.get_item()._getScrollWrapElement();
                   var groupHeight = item.get_groupSettings().get_height();
                   var itemHeight = item.get_element().offsetHeight;
                   itemHeight = childCount * itemHeight;            
                   if (itemHeight < parseInt(groupHeight)) {
                       scrollWrapElement.style.height = itemHeight + "px";
                   }
               }
            </script>

    Kind regards,
    Kate
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017