Implementing Max Height when Using a Web Service

[Steve]

Hi,

I have a menu that is being populated via a web service. It is functioning correctly right now, however, a couple levels deep in the nesting has the items display off the screen. We need to implement a max height on the boxes to prevent this. How would we do this with the control? I have tried using the Group Settings height, however cannot get the desired behavior.

Thanks,
Steve

[Cori]

Hello Steve,

Have you tried setting EnableAutoScroll and see if that helps. Also, do you have EnableScreenBoundaryDetection turned on?

[Kate]

Hi Steve,

Since the issue that you encounter is not a trivial one I would suggest that you open a support ticket and send us a sample runnable project where we can reproduce the issue and help you out with a solution. Providing an image demonstrating the problem would also be very helpful.  

Best wishes,
Kate
the Telerik team

[Steve]

EnableScreenBoundaryDetection was already on. I EnableAutoScroll = true. but now I just get the popup container cutting off the extra items. I can see they are there, but there is no scroll.

[Steve]

A sample will take me a little while to construct. In the meantime, here is a screenshot of the issue.

[Kate]

Hello Steve,

I suitable solution for the issue that you encounter would be the following code (as I already described in the support ticket that you sent). However, since your scenario is a very customized one, and to avoid any confusion, I would suggest that we continue the communication there.

<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>

markup

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true"
    OnClientItemPopulated="itemOpened">
    <WebServiceSettings Path="ProductCategories.asmx" Method="GetMenuCategories" />
    <LoadingStatusTemplate>
        <asp:Image runat="server" ID="LoadingImage" ImageUrl="Images/loading.gif" ToolTip="Loading..."
            Width="16px" Height="16px" Style="margin-top: 8px" />
    </LoadingStatusTemplate>
    <Items>
        <telerik:RadMenuItem Text="Products" Value="1" ExpandMode="WebService">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Purchase" Value="132" ExpandMode="WebService">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Support" Value="141" ExpandMode="WebService">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Community" Value="155" ExpandMode="WebService">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Corporate" Value="164" ExpandMode="WebService">
        </telerik:RadMenuItem>
    </Items>
    <DefaultGroupSettings Height="100px" />
</telerik:RadMenu>

Regards,
Kate
the Telerik team

[jolynice]

Hi everyone,

I have the same problem, there´s a solution?

Thanks,

Jolynice

[Helen]

Hi Jolynice,

Did you try the solution below?
Note that in LoadOnDemand scenarios you should subscribe to the OnClientItemPopulated client-side event.

All the best,
Helen
the Telerik team