How to expand Mobile RadMenu child items by clicking anywhere on a parent item?

5 posts, 0 answers
  1. Orin Book
    Orin Book avatar
    54 posts
    Member since:
    Sep 2006

    Posted 09 May 2014 Link to this post

    When the menu is in mobile render mode and we have sub menus, you have to tap the arrow to the right of the menu name to get the menu to expand. Is there a method to allow tapping anywhere on the sub-menu to have it expand ?
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 12 May 2014 Link to this post

    Hi,

    In order to achieve such Mobile RadMenu behavior, you may handle the RadMenu OnClientItemClicked event in the following way:

    <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Mobile" OnClientItemClicked="OnClientItemClicked" >
    </telerik:RadMenu>
     
    <script type="text/javascript">
        function OnClientItemClicked(sender, args) {
            args.get_item().open();
        }
    </script>


    Regards,
    Dimitar
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Orin Book
    Orin Book avatar
    54 posts
    Member since:
    Sep 2006

    Posted 12 May 2014 in reply to Dimitar Link to this post

    Thank you so much for your response. We will implement this. Have a great week. :) Respectfully, Tre'
  5. Burak
    Burak avatar
    1 posts
    Member since:
    Dec 2012

    Posted 25 Jul 2014 in reply to Orin Book Link to this post

    I have the same issue, Your suggestion works perfectly however it has another problem, 
    It works perfectly on desktop. But with Iphone, it causes a problem. when we click the a menu item, it switches to the submenu that belongs to. However it redirects the page which is linked by a submenu item that located on the same spot with his parent menu item that we clicked for expanding. Lets say I clicked the 2nd parent menu item, It switches to its submenu, and redirects the page to submenu item which is the 2nd one. if I click the 4th parent menu, it redirects to the 4th submenu item's link.

    How can we solve this problem?

    Thank yoou
  6. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 28 Jul 2014 Link to this post

    Hi,

    I was able to reproduce the issue in the scenario described. In order to avoid this unwanted behavior, instead of handling the OnClientItemClicked event, we shall handle the OnClientItemClicking event that allows cancellation. Please discard the previous example and use the following snippet:

    <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Mobile" OnClientItemClicking="OnClientItemClicking">
     
    <script type="text/javascript">
        function OnClientItemClicking(sender, args) {
            if (args.get_item().get_navigateUrl() == null) {
                args.get_item().open();
                args.set_cancel(true);
            }
        }
    </script>

    I have tested this solution on iOS Safari, Android Chrome and desktop browsers and it does not show the flaw observed previously.

    Regards,
    Dimitar
    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