[Solved] RadContextMenu - iPad long touch not working

[Venkata]

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?

[Venkata]

anybody can help me?

[Boyan Dimitrov]

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

[Venkata]

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

[Boyan Dimitrov]

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