New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Auto height of Mobile RadMenu items group popup
The below example demonstrates how to dynamically change the height of the Mobile RadMenu dropdown, which holds the RadMenuItems, depending on the number of items opened. It is achieved by updating the max-height of groups' element in the OnClientItemOpened and OnClientItemClosed events.
CSS
html .RadMenuPopup .rmGroup {
height: auto;
}
ASP.NET
<telerik:RadMenu runat="server" RenderMode="Mobile" OnClientItemOpened="ExpandOpenedItem" OnClientItemClosed="ExpandClosedItem" >
<Items>
<telerik:RadMenuItem Text="Item" >
<Items>
<telerik:RadMenuItem Text="Item">
<Items>
<telerik:RadMenuItem Text="Item" />
<telerik:RadMenuItem Text="Item" />
<telerik:RadMenuItem Text="Item" />
<telerik:RadMenuItem Text="Item" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item" >
<Items>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="Item"></telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
JavaScript
var $ = $telerik.$;
function ExpandOpenedItem(sender, args) {
var rmGroup = args.get_item().get_childListElement();
setSlideHeight(rmGroup);
}
function ExpandClosedItem(sender, args) {
var rmGroup = $(args.get_item().get_element()).parent();
setSlideHeight(rmGroup);
}
function setSlideHeight(rmGroup) {
var rmGroupHeight = $(rmGroup).height();
$(".rmSlide").height(rmGroupHeight);
$(".rmSlide").css("max-height", rmGroupHeight)
}