EnableAutoScroll for RadContextmenu not working as expected (and documented)

[Paul Evers]

I have a RadContextMenu which I populate dynamically with menuitems.
I want to have the autoscroll enabled when the contextmenu becomes too large.

<telerik:RadContextMenu ID="contextmenuGraph" runat="server"
   OnClientItemClicked="menuitemGraphClicked" OnClientItemClicking="menuitemClicking"
   OnItemClick="contextmenuGraph_ItemClick" ExpandDelay="300"
   EnableAutoScroll="True">

</telerik:RadContextMenu>

According to the online-documentation the attribute EnableAutoScroll will enable a scroll if the menu is larger than the screen height.

RadMenu.EnableAutoScroll Property

RadMenu Class See Also Send Feedback

RadControls for ASP.NET AJAX

Gets or sets a value indicating if an automatic scroll is applied if the groups are larger then the screen height.

Namespace: Telerik.Web.UI
Assembly: Telerik.Web.UI (in Telerik.Web.UI.dll) Version: 2012.2.607.0 (2012.02.607.0)

This does not happen.

When I (as suggested in several forum-threads) add a height to the defaultgroupsettings the scroll does work.
<DefaultGroupSettings Height="400px" /> 

However, when I have a submenu with only 4 items this submenu will also be 400px, This of course is not what I want.

How do I get the behaviour that the scroll and height will only be applied when the height exceeds the maximum (which AUTO-scroll suggests) ?

Paul

[Paul Evers]

I have noticed that the EnableAutoScroll attribute for the headercontextmenu used in RadGrid has a default value true. In this contextmenu the autoscroll is working properly.
Why is this not working the same in RadContextMenu ???

Paul

[Helen]

Hello Paul,

EnableAutoScroll doesn't work for RadContextMenu. If you want RadContextMenu to scroll, please use the GroupSettings-Height.


Regards,
Helen
the Telerik team

[Paul Evers]

If I use the groupsettings-height the height of the contextmenu is set to this value, even when the menu has less menuitems than can be displayed in the configured height.
As the menuitems is determined by a model (I as a developer don't know how many items are to be displayed) this solution is not suitable.

In the header-contextmenu used in the RadGrid the option EnableAutoScroll does work. I assume that this contextmenu is the same as the RadContextmenu.
Why is this working in the RadGrid-header-contextmenu and not in the RadContextmenu?

Paul

[Peter]

Hi Paul,

A simple and easy workaround that I can think of is to set the DefaultGroupSettings.Height property conditionally based on the number of root items:

protected void Page_Load(object sender, EventArgs e)
  {
      if (RadContextMenu1.Items.Count > 10)
      {
          RadContextMenu1.DefaultGroupSettings.Height = Unit.Pixel(400);
      }
  }

If you data bind the menu, then use its DataBound event instead of PageLoad.

All the best,
Peter
the Telerik team

[Paul Evers]

With this solution the result is that submenus will also have this default height.

I did not get an answer to the question why the RadGrid-header-contextmenu works differently than the RadContextmenu.

My conclusion is that the RadContextmenu is not suitable for my purpose. I now have used RadMenu. In RadMenu the option EnableAutoScroll does work correctly.
In my opinion the fact that the option EnableAutoScroll does not work correctly in RadContextmenu is a bug.

Paul

[Peter]

Hi Paul,

Thank you for your feedback. I will log the issue and forward it to our developers to review it. You can monitor its status in the PITS - http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/12141.

Kind regards,
Peter
the Telerik team

[Dave Wolf]

Stepping through the javascript, it seems that the problem with EnableAutoScroll and RadContextMenu exists because of the changing locations of a single RadContextMenu.

Regardless, with animations gone, you can force the context menu to forget the saved auto scroller information and rebuild it each time it is opened.

<telerik:RadContextMenu ID="RadContextMenu1" runat="server" EnableAutoScroll="true" OnClientItemClosing="removeAutoScroller">

    <ExpandAnimation Type="None" Duration="0" />

    <CollapseAnimation Type="None" Duration="0" />

</telerik:RadContextMenu>

<script type="text/javascript">
function removeAutoScroller(s, e) {
    s._openedItem._removeAutoScroll();
}
</script>