Context Menu On Mobile Devices

6 posts, 1 answers
  1. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 06 Nov 2011 Link to this post

    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
  2. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 09 Nov 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 09 Nov 2011 Link to this post

    Thanks.  Just what I was looking for.
  5. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 09 Nov 2011 Link to this post

    Thanks.  Just what I was looking for.
  6. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 09 Nov 2011 Link to this post

    Thanks.  Just what I was looking for.
  7. AMS
    AMS avatar
    34 posts
    Member since:
    Aug 2008

    Posted 25 Sep 2012 Link to this post

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

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