This is a migrated thread and some comments may be shown as answers.

RadContextMenu - iPad Safari (Right Click?)

14 Answers 309 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Xorcist
Top achievements
Rank 1
Xorcist asked on 09 Sep 2010, 01:35 PM
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...

14 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 13 Sep 2010, 08:47 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Xorcist
Top achievements
Rank 1
answered on 14 Sep 2010, 02:44 PM
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.
0
Xorcist
Top achievements
Rank 1
answered on 14 Sep 2010, 03:14 PM
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...
0
Kamen Bundev
Telerik team
answered on 14 Sep 2010, 04:09 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Michael Constantine
Top achievements
Rank 1
answered on 28 Jan 2011, 08:52 PM
How would you apply this to a Row in a radgrid ?
0
Kamen Bundev
Telerik team
answered on 03 Feb 2011, 01:55 PM
Hello Michael,

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

Kind regards,
Kamen Bundev
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Jody Harbour
Top achievements
Rank 1
answered on 13 Oct 2011, 06:24 PM
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.
0
Ivan Zhekov
Telerik team
answered on 24 Oct 2011, 08:28 AM
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
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
0
Dave
Top achievements
Rank 1
answered on 29 Feb 2012, 08:22 AM
So how would I handle a RadFileExplorer open file event? i would want to replace the double click event
0
Ivan Zhekov
Telerik team
answered on 07 Mar 2012, 05:38 PM
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
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.
0
Phil
Top achievements
Rank 2
answered on 20 Aug 2012, 07:44 PM

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? 

0
Himanshu
Top achievements
Rank 1
answered on 29 Aug 2012, 01:31 PM
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++;
            }
0
Maneesh
Top achievements
Rank 1
answered on 19 Aug 2015, 07:29 AM

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.

0
Ivan Zhekov
Telerik team
answered on 24 Aug 2015, 07:16 AM
Hi, Maneesh.

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

<%@ Page Language="C#" %>
 
<!DOCTYPE html>
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Menu
Asked by
Xorcist
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Xorcist
Top achievements
Rank 1
Michael Constantine
Top achievements
Rank 1
Jody Harbour
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Dave
Top achievements
Rank 1
Phil
Top achievements
Rank 2
Himanshu
Top achievements
Rank 1
Maneesh
Top achievements
Rank 1
Share this question
or