RadMenu scrolling for dynamically added sub-items

8 posts, 0 answers
  1. Jeff
    Jeff avatar
    4 posts
    Member since:
    Jun 2008

    Posted 29 Oct 2008 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 05 Nov 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    4 posts
    Member since:
    Jun 2008

    Posted 05 Nov 2008 Link to this post

    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.
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 06 Nov 2008 Link to this post

    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.
  6. Jeff
    Jeff avatar
    4 posts
    Member since:
    Jun 2008

    Posted 10 Nov 2008 Link to this post

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



  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 11 Nov 2008 Link to this post

    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.
  8. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 16 Sep 2014 Link to this post

    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.


  9. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Sep 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017