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

Context Menu On Mobile Devices

5 Answers 204 Views
Menu
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 06 Nov 2011, 02:42 PM
Hi All,

My customer wants context menus to be available on a mobile device.  I'm not a terribly big fan of the idea, in that I would prefer to build a more mobile-like interface.  However, he is not yet ready to do that for this site.

My question is, what is the best practice for using menus on a mobile device?  Right clicking does not appear to be a good solution, in that a right click is really unavailable with a mobile interface (iPhone, iPad, Android).  Also, a left click has the disadvantage in that if you are using it on a grid, you will confuse the menu with the selection of the row for other purposes.  Double click, maybe?  Hover?

Any opinions?

Jim

5 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Zhekov
Telerik team
answered on 09 Nov 2011, 07:22 PM
Hello James,

Double tap might trigger zoom on some devices. A long-touch (tap and hold) event might be more appropriate.

Here -- http://www.telerik.com/community/forums/aspnet-ajax/menu/radcontextmenu---ipad-safari-right-click.aspx -- you can find something similar.

Kind regards,
Ivan Zhekov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
James
Top achievements
Rank 1
answered on 09 Nov 2011, 10:13 PM
Thanks.  Just what I was looking for.
0
James
Top achievements
Rank 1
answered on 09 Nov 2011, 10:13 PM
Thanks.  Just what I was looking for.
0
James
Top achievements
Rank 1
answered on 09 Nov 2011, 10:14 PM
Thanks.  Just what I was looking for.
0
AMS
Top achievements
Rank 1
answered on 26 Sep 2012, 01:33 AM
Hi
I am also having the same problem but the scenario is quite different. I am dynamically attaching ContextMenus with the tree nodes based on different values. These context menus are getting their IDs in the form of  random number which is being generated inside the loop in order to differentiate the context menu of one node with the other.

Everything works fine except on iPad. So this solution doesn't work with my scenario. Could you please help me out in sorting out this one?
   <telerik:RadTreeView  ID="tvCompletedCourses" runat="server" AllowNodeEditing="false"  oncontextmenuitemclick="tvCompletedCourses_ContextMenuItemClick">
                                <ContextMenus>
                                    <telerik:RadTreeViewContextMenu  ID="completedContextMenu" runat="server">
                                        <Items>
                                            <telerik:RadMenuItem Value="Enter" Text="Enter">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Value="Print" Text="Print Certificate">
                                            </telerik:RadMenuItem>
                                        </Items>
                                        <CollapseAnimation Type="none" />
                                    </telerik:RadTreeViewContextMenu>
                                    </ContextMenus>
                                     
</telerik:RadTreeView>
 
  tvCompletedCourses.ContextMenus[0].Visible = false; //disable the already existing contectmenu
 
                            DataRow[] foundRows = dsCompletedCoursesByApprovedBodies.Tables[0].Select("CourseID ='" + theRow["CourseID"].ToString() + "'");
 
 
                            RadTreeViewContextMenu ctxMenu;
                            RadMenuItem menuItem;
                            RadMenuItem menuItem1;
                            int rValue;
 
                            if (foundRows.Length > 0)
                            {
                                for (int i = 0; i < foundRows.Length; i++)
                                {
                                    //this field is being used to make a decision if that course has a valid certificate to print
                                    if (foundRows[i]["IsValidCertificate"].ToString() != "0")
                                    {
                                        ctxMenu = new RadTreeViewContextMenu();
                                        rValue = Next();
                                        //ctxMenu.ID = "completedContextMenu" + ctr.ToString();
                                        ctxMenu.ID = "completedContextMenu" + rValue.ToString();
 
                                        menuItem = new RadMenuItem();
                                        menuItem.Text = "Enter";
                                        menuItem.Value = "Enter";
                                        ctxMenu.Items.Add((menuItem));
 
                                        menuItem = new RadMenuItem();
                                        menuItem.Text = "Print";
                                        menuItem.Value = "Print";
                                        ctxMenu.Items.Add((menuItem));
 
                                        tvCompletedCourses.ContextMenus.Add(ctxMenu);
                                        courseNode.ContextMenuID = ctxMenu.ID;
                                    }
                                    else
                                    {
                                        //do not show the print option
                                        ctxMenu = new RadTreeViewContextMenu();
                                        rValue = Next(); //function to pick up the random value
                                        ctxMenu.ID = "completedContextMenu" +  rValue.ToString();
 
                                        menuItem = new RadMenuItem();
                                        menuItem.Text = "Enter";
                                        menuItem.Value = "Enter";
                                        ctxMenu.Items.Add((menuItem));
 
                                        tvCompletedCourses.ContextMenus.Add(ctxMenu);
                                        courseNode.ContextMenuID = ctxMenu.ID;
                                    }
                                }
                                ctr++;
                            }
 
 
 
   protected void tvCompletedCourses_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e) {
            string nodeValue = e.Node.Value;
            string nodeID = String.Empty;
            if (nodeValue.StartsWith("CO_"))
                nodeID = nodeValue.Substring(3);
            else if (nodeValue.StartsWith("C_"))
                nodeID = nodeValue.Substring(2);
            else
                nodeID = nodeValue;
            int courseID = Convert.ToInt32(nodeID);
            switch (e.MenuItem.Value) {
                case "Enter":
                    enrollCourses(courseID);
                    break;
                case "Print":
                    Member theMember = new Member(currentIdentity.MemberID);
                    int enrolmentID = theMember.IsEnrolledInCourse(courseID);
                    Response.Redirect(String.Format("~/printcert.aspx?EnrolmentID={0}", enrolmentID));
                    break;
            }
        }

Tags
Menu
Asked by
James
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
James
Top achievements
Rank 1
AMS
Top achievements
Rank 1
Share this question
or