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

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

4 Answers 71 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Orin Book
Top achievements
Rank 1
Orin Book asked on 09 May 2014, 02:41 PM
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 ?

4 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 12 May 2014, 11:02 AM
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.

 
0
Orin Book
Top achievements
Rank 1
answered on 12 May 2014, 01:04 PM
Thank you so much for your response. We will implement this. Have a great week. :) Respectfully, Tre'
0
Burak
Top achievements
Rank 1
answered on 25 Jul 2014, 05:22 PM
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
0
Dimitar
Telerik team
answered on 28 Jul 2014, 08:43 AM
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.

 
Tags
Menu
Asked by
Orin Book
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Orin Book
Top achievements
Rank 1
Burak
Top achievements
Rank 1
Share this question
or