RadContextMenu - iPad long touch not working

5 posts, 0 answers
  1. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 17 Jul 2013 Link to this post

    Hi,
    I am using Telerik.Web.UI version:2012.1.501.40
    I have a Radgrid on webform so user can right click and select one option from Menu, which is working fine in regular browsers.
    I am trying to implement Long touch event for IPad(which can't do right click)
    I have gone through below example and didn't get work it out.
    http://www.telerik.com/community/forums/aspnet-ajax/menu/radcontextmenu---ipad-safari-right-click.aspx

    Here is the code on page
    <telerik:RadScriptManager ID="ScriptManager" runat="server" />
     
     <telerik:RadContextMenu ID="RadContextMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" OnClientItemClicked="MenuItemClick">
    <Items>
      <telerik:RadMenuItem Text="View by Ase Order" Value="ase">
      </telerik:RadMenuItem>
      <telerik:RadMenuItem Text="View by Desc Order" Value="desc">
      </telerik:RadMenuItem>          
    </Items>
        </telerik:RadContextMenu>
     
     <telerik:RadGrid runat="server" ID="RadGrid1" >
          <ClientSettings>
          <ClientEvents OnRowContextMenu="RowContextMenu" />
          </ClientSettings>           
    </telerik:RadGrid>
     
    <script type="text/javascript" language="javascript">
     
            var lastContext = null;
            var longTouchID = 0;
     
            function longTouch() {
                longTouchID = 0;
                $find('RadGrid1')._RowContextMenu(lastContext);
            }
     
            function handleTouchStart (e) {
                lastContext = e;
                lastContext.target = e.originalTarget;
                lastContext.pageX = e.changedTouches[0].pageX;
                lastContext.pageY = e.changedTouches[0].pageY;
                lastContext.clientX = e.changedTouches[0].clientX;
                lastContext.clientY = e.changedTouches[0].clientY;
                longTouchID = setTimeout(longTouch, 1000);
            }
     
            function handleTouchEnd (e) {
                if (longTouchID != 0)
                    clearTimeout(longTouchID);
            }
     
            function pageLoad() {
                if ($telerik.isMobileSafari) {
                    var gridArea = $get('RadGrid1');
                    gridArea.addEventListener('touchstart', handleTouchStart, false);
                    gridArea.addEventListener('touchend', handleTouchEnd, false);
                }
            }
     
          function RowContextMenu(sender, eventArgs)
                {
                    var menu = $find("<%=RadContextMenu1.ClientID %>");
                    var evt = eventArgs.get_domEvent();
      
                    if (evt.target.tagName != "A")
                    {
                        return;
                    }
     
                    document.getElementById("radGridName").value = sender.ClientID;
                    
                    var index = eventArgs.get_itemIndexHierarchical();                
      
                    sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
                    sender.get_masterTableView().get_dataItems()[index].set_selected(false);
      
                    menu.show(evt);
      
                    evt.cancelBubble = true;
                    evt.returnValue = false;
      
                    if (evt.stopPropagation)
                    {
                        evt.stopPropagation();
                        evt.preventDefault();
                    }
                }

    It's not opening Context Menu for long touch on IPad.
    What i am missing here?

  2. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 23 Jul 2013 Link to this post

    anybody can help me?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Jul 2013 Link to this post

    Hello,

    Please find attached a sample project with a RadGrid control and RadContextMenu.  Following the provided forum discussion I have modified your implementation in order to show the context menu as expected on long touch event on IPad device. Please note that I have removed the following lines of code since on my sample page there is no element with id value "radGridName" and the grid rows are not rendered as anchor tags.
    //JavaScript
    function contextMenu(sender, eventArgs) {
               .......
     
                //if (evt.target.tagName != "A") {
                //    return;
                //}
     
                //document.getElementById("radGridName").value = sender.ClientID;
     
                .........
            }

    Regards,
    Boyan Dimitrov
    Telerik
    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 the blog feed now.
  5. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 05 Aug 2013 Link to this post

    Boyan Dimitrov
    Thank you for sample project. 
    I have a another quick question.
    I have a Two Radgrids on my page and how can we know which grid user clicked/Touched?

    Thanks in advance
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Aug 2013 Link to this post

    Hello,

    I guess in your case both RadGrid controls have same handler function for the client OnRowContext event. In this case the sender parameters stores the current clicked/touched RadGrid client-side object. In order to differentiate which one is clicked/touched you can simply retrieve the id of the current object by simply use the method .get_id() of the sender.

    Regards,
    Boyan Dimitrov
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017