add-scrolling-to-radcontextmenu.md

title	page_title	description	slug	tags	published	position
Add Scrolling to RadContextMenu	Add Scrolling to RadContextMenu	Check our "Add Scrolling to RadContextMenu" documentation article for the RadContextMenu {{ site.framework_name }} control.	radcontextmenu-how-to-add-scrolling-to-radcontextmenu	add,scrolling,to,radcontextmenu	true	5

Add Scrolling to RadContextMenu

Anytime you implement a RadContextMenu which displays a long list of items, or simply wish to limit the number of items visible in the menu, you can add scrolling functionality to RadContextMenu, and more specifically vertical scrolling. The process to do that is very simple and straightforward. This article will guide you through the process.

Use Height and DropDownHeight properties

RadContextMenu has Height property. If you set it, but the RadMenuItems inside it doesn't fit in this size, you will see two buttons which can be used to scroll through your collection:

But if any of your RadMenuItems has submenu items, they will be placed inside another popup. That's why we've added DropDownHeight property for RadMenuItem. The value of the property shows the height of RadMenuItem's submenu. The behavior when the items doesn't fit in the set DropDownHeight is the same as described above:

Here's a simple code that shows how to use Height and DropDownHeight properties:

XAML

{{region xaml-radcontextmenu-howto-scrolling_1}} telerik:RadContextMenu.ContextMenu <telerik:RadContextMenu x:Name="radContextMenu" Height="200"> <telerik:RadMenuItem Header="Item 1" DropDownHeight="200"> <telerik:RadMenuItem Header="Item 1.1"/> <telerik:RadMenuItem Header="Item 1.2"/> </telerik:RadMenuItem> <telerik:RadMenuItem Header="Item 2"/> </telerik:RadContextMenu> </telerik:RadContextMenu.ContextMenu> {{endregion}}

Scrolling in RadMenuGroupItem

If you are using RadMenuGroupItem you can control scrolling inside it via ScrollViewer's attached properties - VerticalScrollBarVisibility and HorizontalScrollBarVisibility.

XAML

{{region xaml-radcontextmenu-howto-scrolling_2}} <telerik:RadContextMenu x:Name="ContextMenu1"> <telerik:RadMenuGroupItem Height="100" Width="150" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"> telerik:RadColorSelector/ </telerik:RadMenuGroupItem> </telerik:RadContextMenu> </telerik:RadContextMenu.ContextMenu> {{endregion}}