Dynamic Menu: Need scrolling capability

[William]

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

[Kate]

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

[Shinu]

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.

[olav]

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.

[Kate]

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