RadMenu scrolling for dynamically added sub-items

[Jeff]

Hi.

I have a RadMenu as below:
        

                                <telerik:RadMenu runat="server" ID="templatesMenu" OnClientItemClicked="templatesMenuOnItemClicked"
                                    OnClientLoad="templatesMenuOnClientLoad" Skin="Telerik" Style="margin-left: 10px;" DefaultGroupSettings-Height="250px" EnableAutoScroll="true" EnableScreenBoundaryDetection="false">
                                    <Items>
                                        <telerik:RadMenuItem Text="<span style='color: Black; font-weight: normal;'>Templates</span>" runat="server" GroupSettings-Height="250">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>

I am dynamically adding three items in javascript to the root Item "Templates". Then each of these sub-items have 40ish sub-items added under them. Shouldn't scrolling work on these 40ish sub-items, since I have enableautoscroll and Default-GroupSettings and EnableScreenDetection configured?

I've tried every combination of those three to no avail. Scrolling just doesn't appear for these sub-sub items.

[T. Tsonev]

Hello Jeff,

Please, excuse me for the late reply. I think that you do not need automatic scrolling in your scenario. It is used when you want the menu to automatically determine the group height/width depending on the available space. Since, you already know the height (250px) you can simply set it through the API. I have prepared a little sample that demonstrates this:

<script type="text/javascript">
    function templatesMenuOnClientLoad(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");

            // Important - add the root item before adding subitems
            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>

<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>

<telerik:RadMenu runat="server" ID="templatesMenu"
    Skin="Telerik" OnClientLoad="templatesMenuOnClientLoad">
    <Items>
        <telerik:RadMenuItem Text="<span style='color: Black; font-weight: normal;'>Templates</span>">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Let me know if this is what you had in mind.

Sincerely yours,
Tsvetomir Tsonev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

Thanks. I tried that but it doesn't seem to work. I can't do it in the client load, since the menu gets populated as the result of an ajax call...is it possible that is the issue?

Please see the below:

                        <telerik:RadToolBarButton runat="server" DesignVisible="true" HtmlVisible="false"
                            PreviewVisible="true">
                            <ItemTemplate>
                                <telerik:RadMenu runat="server" ID="templatesMenu" OnClientItemClicked="templatesMenuOnItemClicked"
                                    OnClientLoad="templatesMenuOnClientLoad" Skin="Telerik" Style="margin-left: 10px;">
                                    <Items>
                                        <telerik:RadMenuItem Text="<span style='color: Black; font-weight: normal;'>Templates</span>">
                                            <GroupSettings Height="200px" />
                                            <Items>
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>
                            </ItemTemplate>
                        </telerik:RadToolBarButton>

Then...

function loadTemplates(items) {
    var rootItem = globalTemplatesMenu.get_items().getItem(0);
    rootItem.get_items().clear();
    loadTemplatesMenuItems(rootItem, items);
}

function loadTemplatesMenuItems(parentRadItem, parentItem) {
    if (parentItem.items){
        for (var i = 0; i < parentItem.items.length; i++) {
            var item=parentItem.items[i];

            var newChildRadItem = getTemplateMenuItem(item);
            newChildRadItem.get_groupSettings().set_height("100px");
            parentRadItem.get_items().add(newChildRadItem);

            if (item.items) {
                loadTemplatesMenuItems(newChildRadItem, parentItem.items[i]);
            }
        }
    }
}

function getTemplateMenuItem(item){
    var radItem = new Telerik.Web.UI.RadMenuItem();
    radItem.set_text(item.text);
    return radItem;
}

Any other suggestions?

Thanks.

[T. Tsonev]

Hello Jeff,

Populating the menu as a result of an AJAX call should not be a problem. I am attaching you a sample page that uses your code to populate the menu and appears to work fine. Let me know if I am missing something.

Sincerely yours,
Tsvetomir Tsonev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jeff]

There appear to be a couple of issues here.

One is the skin. The Telerik skin doesn't work at all for scrolling... Switching to the Web20 skin makes this scenario work (for both the test level and the inner level):

                                <telerik:RadMenu runat="server" ID="templatesMenu" OnClientItemClicked="templatesMenuOnItemClicked"
                                    OnClientLoad="templatesMenuOnClientLoad" Skin="Web20" Style="margin-left: 10px;"
                                    DefaultGroupSettings-Height="250px">
                                    <Items>
                                        <telerik:RadMenuItem Text="<span style='color: Black; font-weight: normal;'>Templates</span>">
                                            <Items>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                    <Items>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="inner">
                                                        </telerik:RadMenuItem>
                                                    </Items>
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem Text="test">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>

However, the Telerik skin does not work for scrolling (at all). I'm using Q1 2008.

Even with the Web20 skin, the scrolling does not work for my dynamically added items and sub items.

I've also tried removing the line with get_groupSettings.set_height altogether, since the DefaultGroupSettings-Height should be sufficient...but this still just doesn't work.

I've also tried reducing the code that dynamically adds items to:

function loadTemplates(items) {

var rootItem = globalTemplatesMenu.get_items().getItem(0);

//rootItem.get_items().clear();

//loadTemplatesMenuItems(rootItem, items);

var radItem = new Telerik.Web.UI.RadMenuItem();

radItem.set_text("test dynamic item");     radItem.get_groupSettings().set_height("200px");

rootItem.get_items().add(radItem);

for (var i=0;i<15;i++){

var childRadItem = new Telerik.Web.UI.RadMenuItem();

childRadItem.set_text("inner");

radItem.get_items().add(childRadItem);

}

The outer list of statically added items (test,test,test,test, etc.) scrolls. The child items of "test dynamic item" do not.

What am I missing here?

If you want a screenshot let me know...

[T. Tsonev]

Hello Jeff,

It might not look like so, but in fact the scrolling works with all skins. What is happening is that the items are less than 250px high in the mentioned skins, except for Web20. They are a bit higher with it, so the scroll gets enabled.

As for the scrolling of the dynamically added items - you are correct, it does not work in the Q1 release. However, it works fine with the Q3 release, so you might want to download the latest trial version.

Regards,
Tsvetomir Tsonev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Naree]

Hi Tsonev,
I'm getting some issue in case of radmenu.If the machine contains 1024*768 screen resolution the problem arising. The menus are get sliding down can u please suggest me how to solve this issue.I'm loading menus from code behind.
Thanks in advance.I'm eagerly waiting to solution.


Best Regards,
G.NareshReddy.

[Magdalena]

Hello,

You can set a fixed width of the RadMenu by its Width property. If the RadMenu is wider than all widths of its root items, we recommend you to set also the EnableRootItemScroll property to true.

Regards,
Magdalena
Telerik