This is a migrated thread and some comments may be shown as answers.

RadMenu scrolling for dynamically added sub-items

7 Answers 338 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 29 Oct 2008, 05:25 PM
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.

7 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 05 Nov 2008, 04:41 PM
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.
0
Jeff
Top achievements
Rank 1
answered on 05 Nov 2008, 06:45 PM
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.
0
T. Tsonev
Telerik team
answered on 06 Nov 2008, 03:08 PM
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.
0
Jeff
Top achievements
Rank 1
answered on 10 Nov 2008, 04:27 PM
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...



0
T. Tsonev
Telerik team
answered on 11 Nov 2008, 03:18 PM
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.
0
Naree
Top achievements
Rank 1
answered on 16 Sep 2014, 12:15 PM
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.


0
Magdalena
Telerik team
answered on 17 Sep 2014, 10:47 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Menu
Asked by
Jeff
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Jeff
Top achievements
Rank 1
Naree
Top achievements
Rank 1
Magdalena
Telerik team
Share this question
or