Context Menu On Mobile Devices

[James]

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

[Ivan Zhekov]

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

[James]

Thanks.  Just what I was looking for.

[James]

Thanks.  Just what I was looking for.

[James]

Thanks.  Just what I was looking for.

[AMS]

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;
            }
        }