You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Some controls from the UI for ASP.NET AJAX suite can react to touch gestures in order to perform a certain action according to the control specifics.A tap gesture is available for any clickable element.Controls where scrolling is needed and available react to the scrolling gestures.Here follows a list with the controls that handle specific gestures, and the actions they perform.
13
+
By default, some Telerik UI for ASP.NET AJAX controls support touch gestures for performing certain actions.
14
14
15
-
*[**Grid**]({%slug grid/mobile-support/mobile-rendering/overview%}) — drag to scroll the tableview or perform swipe with two active points to go to the next/previous page.
15
+
All clickable elements support tap gestures. Scrollable controls support scrolling gestures.
16
16
17
-
*[**Editor**]({%slug editor/mobile-support/overview%}) - tap or double tap to activate a button (tool) or choose an item from a list; drag to scroll (e.g., the content area or the list of tools). Double tap acts like a single tap. Pinch gestures are cancelled by the control to prevent zooming, both in the main editor view and in the dialogs.
18
-
19
-
*[**ImageGallery**]({%slug imagegallery/mobile-support/gestures%}) — swipe to navigate the images, thumbnails and show/hide the thumbnails area;tap and hold to toggle the slideshow feature; double tap to enter/exit full screen mode; tap on an image to navigate to the page pointed by the **NavigateUrl** property.
20
-
21
-
*[**LightBox**]({%slug lightbox/mobile-support/gestures-support%}) — swipe to navigate the images or tap on the image to hide the **navigation arrows** (if visible) and the **description box** (when overlay mode is enabled).
22
-
23
-
*[**Map**]({%slug map/mobile-support/gestures-support%}) — drag the layer to pan; spread or pinch to zoom in or zoom out.
24
-
25
-
***Rotator** — drag an item to scroll the rotator.
26
-
27
-
***Slider** — drag both of the slider's drag handles simultaneously to change its selected region.
28
-
29
-
***TileList** — drag a tile to move it; short vertical drag to select a tile.
30
-
31
-
***Window** — drag the title bar to move the window.
32
-
33
-
*[**Drawer**]({%slug drawer/functionality/gestures%}) — swipe to reveal the full content of the RadDrawer control.
17
+
The following table lists the controls that handle specific gestures, and the actions they perform.
34
18
19
+
|Control|Gesture and Action
20
+
|:---|:---
21
+
|[Grid]({%slug grid/mobile-support/mobile-rendering/overview%})|<ul><li>Drag to scroll the table view.</li> <li>Swipe with two active points to go to the next or previous page.</li></ul>
22
+
|[Editor]({%slug editor/mobile-support/overview%})|<ul><li>Tap or double-tap to activate a button (tool) or choose an item from a list.</li> <li>Drag to scroll (for example, the content area or the list of tools). Double-tap acts like a single tap.</li> <li>Pinch gestures are cancelled by the control to prevent zooming, both in the main editor view and in the dialogs.</li></ul>
23
+
|[ImageGallery]({%slug imagegallery/mobile-support/gestures%})|<ul><li>Swipe to navigate the images, thumbnails, and show or hide the thumbnails area.</li> <li>Tap and hold to toggle the slideshow feature.</li> <li>Double-tap to enter or exit the full screen mode.</li> <li>Tap on an image to navigate to the page pointed by the `NavigateUrl` property.</li></ul>
24
+
|[LightBox]({%slug lightbox/mobile-support/gestures-support%})|Swipe to navigate the images or tap on the image to hide the navigation arrows (if visible) and the description box (when the overlay mode is enabled).
25
+
|[Map]({%slug map/mobile-support/gestures-support%})|<ul><li>Drag the layer to pan.</li> <li>Spread or pinch to zoom in or zoom out.</li></ul>
26
+
|Rotator|Drag an item to scroll the rotator.
27
+
|Slider|Simultaneously drag both drag handles of the Slider to change its selected region.
28
+
|TileList|<ul><li>Drag a tile to move it.</li> <li>Perform a short vertical drag to select a tile.</li></ul>
29
+
|Window|Drag the title bar to move the window.
30
+
|[Drawer]({%slug drawer/functionality/gestures%})|Swipe to reveal the full content of the Drawer.
Most smartphone mobile browsers currently on the market are fairly advanced and Telerik® UI for ASP.NET AJAX work on them with little or no modifications.
14
+
Telerik UI for ASP.NET AJAX supports most current mobile browsers with some modifications.
14
15
16
+
## Considerations
15
17
16
-
However there are certain specifics in these browsers that one needs to know in order to have Telerik controls working to their full extent:
18
+
The following list shows the specifics you need to consider when working with Telerik UI for ASP.NET AJAX controls:
17
19
18
-
***Hover events are fired on touch/click** since there is no actual hover in touch screen devices. This also means that elements shown on hover will be shown on click. For instance to see the submenus in RadMenu, **don’t set NavigateUrls on expandable items;**
20
+
*Because no actual hover exists on touch screen devices, hover events are fired on touch or click. This also means that elements shown on hover will be shown on click. For example, to see the submenus in the Menu, don’t set `NavigateUrls` on expandable items.
19
21
20
-
***Doubleclick is usually reserved for zoom** and is not fired as event;
22
+
* Double-click is usually reserved for zoom and is not fired as an event.
21
23
22
-
* Some browsers **show a context menu on touch & hold** but a **contextmenu event is either not fired and/or the browser menu can’t be cancelled**. Touch & hold event can be implemented manually, but more on this later;
24
+
* Some browsers show a context menu on touch-and-hold but a `contextmenu` event is either not fired or the browser menu can’t be cancelled. You can manually implement the touch-and-hold event.
23
25
24
-
***Scrolling** in mobile browsers is usually **handled with drag gestures**, which means that **"normal" drag&drop is not working;**
26
+
* Scrolling in mobile browsers is usually handled with drag gestures and, therefore, the regular dragging and dropping is not working.
25
27
26
-
* Clicking on editable input elements will bring up the virtual keyboard whenever necessary, so the visible space is shrunk;
28
+
* Clicking on editable `input` elements shows the virtual keyboard and the visible space is shrunk.
27
29
28
-
***Scrolling containers** in Mobile Safari are rendered with overflow: hidden and **can only be scrolled with two finger drag gesture**. We developed a special TouchScrollExtender client control to handle this, check the appropriate topic in this section;
30
+
* Scrolling containers in Safari are rendered with `overflow: hidden` and can only be scrolled with a two-finger drag gesture. For handling such cases, Telerik UI for ASP.NET AJAX provides the `TouchScrollExtender` client control.
29
31
30
-
***ContentEditable is not supported in Mobile Safari up to iOS 4.0**, which means that RadEditor will be rendered as a simple textarea.
32
+
*`ContentEditable` is not supported in Mobile Safari iOS v. 4.0 and earlier, which means that the Editor will be rendered as a simple text area.
31
33
32
-
***Mobile Safari versions before iOS 6 do not support input elements with type="file"**, so it will be rendered as **disabled** (hence RadAsyncUpload/RadUpload won’t work).
34
+
* Mobile Safari v. iOS 6 and earlier do not support `input` elements with `type="file"` so it will be rendered as disabled and the AsyncUpload and Upload won’t work.
33
35
34
-
Some browsers implemented special touch events for mobile devices - namely **touchstart, touchmove** and **touchend** in Mobile Safari and **MozTouchDown, MozTouchMove** and **MozTouchUp** in Mozilla Mobile Firefox (Fennec) which can be used to overcome some of the listed problems. Unfortunately **IE7+ in Microsoft Windows Phone 7 and both mobile Opera browsers do not have touch events support of either kind**, so they are automatically falling out of scope for this article and should be handled as normal desktop browsers if possible.
36
+
Some browsers provide special touch events for mobile devices, for example, Mobile Safari delivers `touchstart`, `touchmove`, and `touchend`, and Mozilla Mobile Firefox (Fennec) delivers `MozTouchDown`, `MozTouchMove`, and `MozTouchUp`which can be used to overcome some of the considerations above.
35
37
36
-
### Implementing Touch & Hold event
38
+
IE7+ in Microsoft Windows Phone 7 and both mobile Opera browsers do not provide touch events support of either kind and will be treated as regular desktop browsers if possible.
37
39
38
-
Since most mobile browsers do not support context menu event properly, we will need to handle it ourselves. This can be done using a click event and a timeout and to raise the context menu event we will need the original event coordinates. For instance let’s get a RadScheduler (it has two context menu events):
40
+
## Touch-and-Hold Event
41
+
42
+
Most mobile browsers do not support the `contextmenu` event properly and you have to handle it by using a `click` event and a timeout. To raise the `contextmenu` event, you will need the original event coordinates.
43
+
44
+
The following example demonstrates how to get a Scheduler which has two `contextmenu` events:
0 commit comments