RadContextMenu - iPad Safari (Right Click?)

[Xorcist]

So some of our end users have brought to light that they can't access our context menus via Safari on the iPad. I'm assuming this is an issue with no Right Click being available. I've attempted to figure out how to right click (double tap, two finger tap, long hold tap, etc.) but nothing seems to work... does anyone know how to perform a Right Click? If not, any ideas on how to resolve this? I guess we could simulate a long tap check with Mouse Down and Mouse Up...

[Kamen Bundev]

Hello Xorcist,

Unfortunately double click in iOS Mobile Safari is hardwired to zoom and can't be prevented. Since two finger tap is not very precise, I'm attaching an example of how to show a RadContextMenu with a tap and hold on a RadTreeView node.

Sincerely yours,
Kamen Bundev
the Telerik team

[Xorcist]

Well, with the

if ($telerik.isMobileSafari) {
}

block the code does nothing... I assume maybe the version of the controls I'm using, 2009Q2, this was iPhone related and not iPad related (since the iPad wasn't around yet). Removing this check did allow the popups to show. So now I just need to tweak it a little. On a similar note, we just received our development iPad and I noticed that Safari uses double click to zoom out... any way to overried that at all. I have double click operation in my page as well.

Thanks.

[Xorcist]

Oh, I just found these too, based off the code sample you provided:

http://mydailyphoto.com/blog/iphone-safari-flick-navigation/

http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/InteractiveVisualEffects/InteractiveVisualEffects.html

I wasn't aware these existed. This should help me out a little, but if you do know of a way to suppress the double tab "zoom-in" I would like to know about it. Every year it gets harder and harder to get cross-platform compatability...

[Kamen Bundev]

Hello Xorcist,

Yes, the $telerik.isMobileSafari was introduced in Q2 2010 release. This variable is based essentially on the same check, you can use it instead:
var isMobileSafari = (navigator.userAgent.search(/like\sMac\sOS\sX;.*Mobile\/\S+/) != -1);

Sincerely yours,
Kamen Bundev
the Telerik team

[Michael Constantine]

How would you apply this to a Row in a radgrid ?

[Kamen Bundev]

Hello Michael,

I'm attaching a sample implementation of long touch event for RadGrid row context menu.

Kind regards,
Kamen Bundev
the Telerik team

[Jody Harbour]

I am looking to do something similar but I am just using a contextmenu on the page

<telerik:ContextMenuElementTarget ElementID="MasterContainer" />

how would I do this for that.

[Ivan Zhekov]

Hello Jody Harbour,

The solution is more or less similar, but instead attaching event on a RadGrid, you attach the event to the body element.

So if you take a look at the code, around line 47 there is a pageLoad function. In that function you need to change the "owner" of the addEventListener from gridArea to document.body or a variable referencing it.

Kind regards,
Ivan Zhekov
the Telerik team

[Dave]

So how would I handle a RadFileExplorer open file event? i would want to replace the double click event

[Ivan Zhekov]

Hello, Dave.

This tread is kind of stale and with your question being quite short, I am not quite sure what to answer.

I could point you to the page for client events of the FileExplorer -- http://www.telerik.com/help/aspnet-ajax/fileexplorer-client-side-events.html -- but I am not sure it will be enough.

You could however, open a new ticket (this thread is long and old enough) with a little bit more information and will see what can be done.

Regards,
Ivan Zhekov
the Telerik team

[Phil]

Is this thread "stale" inthat the solution deson't work any more? I tried it on iPad3 and get nothing.

Ah, made the change to the method call posted elsewhere (_raiseAppointmentContextMenu) and it works.

But in doing so you disable drag and drop? There is no way of having drag and drop AND context menu? 

[Himanshu]

Hi, 
After looking at the attached codes I able to have context menu on my RadScheduler on single touch across the schedular grid for following sample code on IPAD->

<telerik:RadSchedulerContextMenu ID="SchedulerTimeSlotContextMenu" runat="server">
            <Items>
                <telerik:RadMenuItem Text="New PlaceHolder" Value="CommandAddAppointment" />
                <telerik:RadMenuItem IsSeparator="True" />
                <telerik:RadMenuItem Text="Paste Placeholder" Value="" />
            </Items>
        </telerik:RadSchedulerContextMenu>

But I am not able to work for any of the context menu item (e.g "New PlaceHolder") as my "sender.get_selectedSlots()" is not firing properly ( Now I am not able to select any cell as on every click my context menu open without selecting any cell on schedular grid).

I am looking for value in function ::

        function GetSelectedTimeSlot(sender) {

var selected = sender.get_selectedSlots(); // slots are not getting selected
            var counter = 0;
            startSlot = null;
            endSlot = null;
            for (var slot in selected) {
                if (counter == 0) {
                    startSlot = selected[counter];
                }
                endSlot = selected[counter];
                counter++;
            }

[Maneesh]

Hi,

  I want to open the context menu with an html div element, not with the  grid or treeivew.

Can you please explain how do I need to change in the sample code given above.

[Ivan Zhekov]

Hi, Maneesh.

You can use any external library that supports long touch. The example below uses Longpress:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/vaidik/jquery-longpress/master/jquery.longpress.js"></script>
    <style>
        #target {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<form id="form1" runat="server">


    <asp:ScriptManager runat="server" />


    <div id="target"></div>


    <telerik:RadContextMenu runat="server" Visible="true" ID="contextmenu" RenderMode="Lightweight">
        <Items>
            <telerik:RadMenuItem Text="Item 1" />
            <telerik:RadMenuItem Text="Item 2" />
            <telerik:RadMenuItem Text="Item 3">
                <Items>
                    <telerik:RadMenuItem Text="Item 3.1" />
                    <telerik:RadMenuItem Text="Item 3.2" />
                    <telerik:RadMenuItem Text="Item 3.3" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item 4" />
            <telerik:RadMenuItem Text="Item 5" />
        </Items>
    </telerik:RadContextMenu>




    <script>
    Sys.Application.add_load(function() {

        var $ = window.$;
        var menu = $find( "<%= contextmenu.ClientID %>" );

        $("#target").longpress(function() {
            menu.showAt( 0, 0 );
        });

    });
    </script>


</form>
</body>
</html>

The longpress project is located at github: https://github.com/vaidik/jquery-longpress

The shorts of it is that you attach the longpress (touch and hold) event to the div and then in the handler you show the menu at the desired location.

Regards,
Ivan Zhekov
Telerik