4 Answers, 1 is accepted
0
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
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 >>
0
Shinu
Top achievements
Rank 2
answered on 08 Sep 2011, 09:39 AM
Hello William,
An another approach you can try is setting the GroupSettings Height on Javascript to control the scrolling.
aspx:
JS:
Thanks,
Shinu.
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.
0
olav
Top achievements
Rank 1
answered on 31 Oct 2011, 12:18 PM
Hi all,
I followed the demo and added
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.
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.
0
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:
javascript:
Kind regards,
Kate
the Telerik team
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