Version

Touch Support in Ultimate UI for ASP.NET

Topic Overview

Purpose

This topic explains the touch support of Ultimate UI for ASP.NET controls and details the changes and limitations of the controls’ features with regards to this support.

Introduction

Ultimate UI for ASP.NET 23.1 pack expands the supported platforms to cover tablets as well. Now you can use the same functionalities that ASP.NET controls have, except drag-and-drop.

The Infragistics touch support includes scrolling, which is vital for running them under tablets. The controls that have it (see Supported Controls below) have been redesigned: they feature special styles, the clickable area has been enlarged, the rendering follows the tablet requirements, and interacting with the controls on such platforms is easy.

Tablet Programming Overview

General programming requirements of the tablet platforms

Tablets differ from PCs in the way the user interacts with the device. The user uses only their fingers to touch and navigate the tablet screen. They also employ different architecture for showing web page content and getting the user’s response. That’s why for any site to run on a tablet platform, it needs to be redesigned according to tablets’ requirements. In most cases, this means the new touch client events (ontouchstart, ontouchmove, ontouchend, ontouchcancel), as well as redesigning the site content to make it easier to work with. These requirements vary across browsers and platforms.

As getting into details about tablet programming is beyond the scope of this topic, for further details refer to Development in Safari.

Event handling in tablet platforms

Running controls on tablets mandates the support of events that are specific for these platforms, namely:

  • One-finger events – fired when using one finger, e.g. scrolling a page or clicking anywhere on the page

  • Two-finger events – fired when using two fingers, e.g. zooming in and out

  • Orientation events – fired when the device is being rotated

These kinds of events reflect the nature of user interaction and the way it is recognized by the tablet. For detailed information about handling events and gestures, refer to Handling Events in the Safari Developer Library.

Ultimate UI for ASP.NET 23.1 Touch Support Overview

Supported controls

The controls from the Ultimate UI for ASP.NET suit are available for tablet platforms. In this document we will make review for the following controls, that have been modified to fully support tablet platforms:

  • WebDataGrid

  • WebHierarchicalDataGrid

  • WebDataTree

  • WebDataMenu

  • WebVideoPlayer

Touch support scope

The full support of these controls means that they:

  • are visible on tablet platforms

  • support all touch-specific events

  • fit the required sizes

Because of the specific limitations of tablets, drag-and-drop behavior is not supported. Some of the features that have drag-and-drop behavior can achieve the same effect under tablets using the code behind. For example, you can initially group the WebDataGrid columns from the code behind, but cannot do it dynamically at run time.

Control-Specific Information About Touch Support

The blocks below provide detailed touch support information for each supported control.

WebDataGrid and WebHierarchicalDataGrid touch support

Touch Support in NetAdvantage for ASPNET 01.png

Figure : An implementation of the WebHierarchicalGrid viewed in iPad Safari browser

Either the WebDataGrid and WebHierarchicalDataGrid render the same on a tablet browsers as they do on PC browsers, as the picture above testifies. There are a few differences however that come about when the user interacts with these controls.

Table 1 describes the tablet-specific behavior of the controls’ features noting some special cases and differences from the “normal” PC-based browser behavior.

Table 1: WebDataGrid/WebHierarchicalDataGrid feature behavior for tablets

Legend:

workaround.png
  • Feature works the same as on PCs.

workaround.png

! – Feature works with some limitations.

workaround.png
gsm.png

– Feature works somewhat differently than on PC due to the specifics of the tablet environment.

noworkaround.png

– Feature not available.

noworkaround.png
tobeUpdated.png
– Feature not available, but a workaround exists.
Feature Availability Behavior Description

Activation

workaround.png

Same as on PCs.

Column Fixing

workaround.png

Same as on PCs. You need to click on the feature image column fix icon.

Column Moving

noworkaround.png
tobeUpdated.png

Not available at run time, because drag-and-drop is not supported, but can be set from code behind.

Column Resizing

noworkaround.png
tobeUpdated.png

Not available at run time, because drag-and-drop is not supported, but can be set using client or server code.

Drag-and-drop

noworkaround.png

Not available.

Editing Core

workaround.png

Same as on PCs. (Adding, updating and deleting rows.)

Expand/Collapse (WebHiearchicalDataGrid only)

workaround.png
gsm.png

The whole HTML TD element that contains the expanding image is a link, so in order to make it’s easier to be tap on it with the a finger.

Filtering

workaround.png

!

When entering the filter input, filter loses focus due to a Safari bug. That’s why you will need to tap on it manually to re-gain on the focus. This bug is presented in iOS4 version and lower.

Group by

noworkaround.png
tobeUpdated.png

Because drag- and- drop is not supported, you can implement grouping only group by using the code behind.

Paging

workaround.png
gsm.png

Same as on PCs. The paging behavior is working, but the user needs to be precise when pressing touching the paging icons.

Scrolling

workaround.png

You can use scrolling including inertia support.

Selection (single)

workaround.png

Same as on PCs. User can make a single selection, either in a grid row or cell, or a tree node.

Selection (multiple)

noworkaround.png

Not available.

Sorting

workaround.png

Same as on PCs. You need to tap on the header of the column to sort it.

Summaries

workaround.png

Summaries are working. Clicking anywhere within the HTML LI element unmarks the checkbox, that toggles the summary enabled/disabled.

WebDataTree touch support

Touch Support in NetAdvantage for ASPNET 02.png

Figure : An implementation of the WebDataTree viewed in iPad’s browser

The WebDataTree renders the same on tablet browsers as it does on PC browsers, but there are some differences in the way the user interacts with the tree. Table 2 describes the tablet-specific behavior of the controls’ features noting some special cases and differences from the “normal” PC-based browser behavior.

Table 2: WebDataTree feature behavior on tablets

Legend:

workaround.png
  • Feature works the same as on PCs.

workaround.png

! – Feature works with some limitations.

workaround.png
gsm.png

– Feature works somewhat differently than on PC due to the specifics of the tablet environment.

noworkaround.png

– Feature not available.

noworkaround.png
tobeUpdated.png
– Feature not available, but a workaround exists.
Feature Availability Description

Activation

workaround.png

Same as on PCs. Works the same as in PC browsers.

Checkboxes

workaround.png
gsm.png

Working Works in both Bi-State and Tri-State modes.

Drag-and-drop

noworkaround.png

Not available.

Expand/Collapse

workaround.png

Same as on PCs. Works the same as in PC browsers.

Node editing

workaround.png
gsm.png

To enable note editing,, when the WebDataTree is run underon a tablet, the EnableOnSingleClickWhenActive is enabled. That’s This enables editing nodes why by clicking the note caption you will be able to edit nodes in WebDataTree.

Selection (multiple)

noworkaround.png
tobeUpdated.png

Because multiple selections are not possible, use checkboxes for selection.

Selection (single)

workaround.png

Same as on PCs.

WebDataMenu touch support

Touch Support in NetAdvantage for ASPNET 03.png

Figure : Image representing how the WebDataMenu looks under iPad’s Safari

The WebDataMenu renders the same on tablet browsers as it does on PC browsers, but there are some differences in the way the user interacts with the menu. Table 3 describes the tablet-specific behavior of the controls’ features noting some special cases and differences from the “normal” PC-based browser behavior.

Table 3: WebDataMenu feature behavior on tablets

Legend:

workaround.png
  • Feature works the same as on PCs.

workaround.png

! – Feature works with some limitations.

workaround.png
gsm.png

– Feature works somewhat differently than on PC due to the specifics of the tablet environment.

noworkaround.png

– Feature not available.

Feature Availability Description

Selection

workaround.png

Same as on PCs. Works the same as in PC browsers.

Scrolling

workaround.png
gsm.png

When the scroll buttons are tapped, the menu starts scrolling until the end of the list. If the user wants to stop before the end, they have to tap anywhere inside the browser to make the scrolling to stop.

Close menu on click

workaround.png

Same as on PCs. Works the same as in PC browsers.

Activation

workaround.png

Same as on PCs. Works the same as in PC browsers.

Expand/Collapse

workaround.png

Same as on PCs. Works the same as in PC browsers.

Expand/Collapse of

Submenus

workaround.png
gsm.png

The first tapping on an item with a submenu opens the submenu and the second tapping selects the underlying option in the submenu.

Resizing

workaround.png
gsm.png

Same as on PCs. The scroll bar is shown when the screen size becomes too small to display the entire content.

WebVideoPlayer touch support

When running WebVideoPlayer on a mobile device, the default device video player controls are rendered, unless the Modernizr JavaScript library is undefined. If for some reason you do not have the Modernizr library available on your page, then the igVideoPlayer control is rendered, which in some cases may have fewer touch capabilities than the default device video player. That is why when Modernizr library is available igVideoPlayer falls back to the default device video player.