Touch Support for Ignite UI for jQuery Controls

Topic Overview

Purpose

This topic provides a summary of how the Ignite UI for jQuery™ suite supports touch-enabled environments, suggests best practices, and lists the touch-support specifics of the individual Ignite UI for jQuery controls.

In this topic

This topic contains the following sections:

• Introduction
  • Touch support summary
  • Scrolling in touch environment
  • Mobile Pages Best Practices
• Touch Support Specifics of Individual Controls
  • igGrid
  • igHierarchicalGrid
  • igPopover
  • igVideoPlayer

Introduction

Touch support summary

All Ignite UI for jQuery controls support touch interaction. This support is possible by adding new features and components in order to support touch-compatible behaviors.

Rendered in a touch-enabled environment, each Ignite UI for jQuery control will look and behave the same way under Desktop and Touch platforms. For example, the igGrid™ widget is not an entirely new control for the touch device, but includes touch-optimized features which are available under a touch-enabled environment. This adaptability allows you (with little configuration) to have multi-platform control in your applications. For details surrounding individual controls, refer to the Control overview section.

Note: It’s recommended to use the Modernizr JavaScript library together with Ignite UI for jQuery for jQuery controls. The controls work well without Modernizr, but when the library is available on the page, the controls adapt to a more touch-friendly mode.

Scrolling in touch environment

All Ignite UI for jQuery controls support scrolling by default when running under a touch-enabled environment. The scrolling behavior is controlled by an internal component called igScroll™.

For the scrolling behavior to be operational under touch, the igScroll script must be referenced on the page. This is done automatically when using the Infragistics® Loader. However, if you do not use the Loader, you need to either reference it manually or to reference the infragistics.core.js file which contains igScroll.

To reference igScroll manually:

In HTML:

<script type="text/javascript" src="js/modules/infragistics.ui.scroll.js"></script>

You can use the igScroll component to make other HTML elements scrollable, like the <div>, for example:

In HTML:

<div data-scroll=”true”></div>

This way, the igScroll component makes the container scrollable under touch-enabled browsers.

Mobile Pages Best Practices

Ignite UI for jQuery controls are optimized for touch as well as standard desktop web browser use. In addition to using the stock controls you will want to make sure to follow a few best practices in order to get the best performance and response from each control:

• Use Modernizr

  Use the Modernizr JavaScript library together with Ignite UI for jQuery controls in order to ensure the controls render in the most touch-optimized mode possible.

• Define the viewport meta tag

  Explicitly setting the view port dimensions of your page will ensure your page is rendered under right dimensions and proportions. The following code listing demonstrates how to configure your pages view port meta tag:

In HTML:

<meta name="viewport" 
      content="width=device-width, 
               initial-scale=1, 
               maximum-scale=2.5, 
               minimum-scale=0.1, 
               user-scalable=yes" />

Touch Support Specifics of Individual Controls

Touch Support controls summary

The following table summarizes the controls have specifics in their support of touch-enabled environments. Additional details are available for each updated control after the table.

igGrid

The following list summarizes the igGrid features that have properties to support touch capabilities or needs special modification to run properly in touch-enabled environments.

• Feature Chooser
• GroupBy
• Hiding
• Multiple Selection – There are some special selection properties that allow you to select multiple cells on touch platforms.
• Multiple Sorting
• Row Selectors –You need to explicitly define row selectors, when you want to select multiple rows on touch platform. (You must use the Row Selectors widget anytime you want to select multiple rows.)
• Tooltips – use the popover style which is a tooltip style specially designed to meet the touch compatibility needs

Related Content

igHierarchicalGrid

To make an igHierarchicalGrid feature touch-compatible, you configure its settings in the same way as with the igGrid control.

The following list summarizes the igHierarchicalGrid features that have properties to support touch-capabilities or require special modification to run properly in touch-enabled environments.

• Feature Chooser
• GroupBy
• Hiding
• Multiple Selection – There are some special selection properties that allow you to select multiple cells on touch platforms. (For the igHierarchicalGrid you will need to enable the Selection feature in the parent grid, because the selection feature is not inherited.)
• Multiple Sorting
• Row Selectors –You need to explicitly define row selectors, when you want to select multiple rows on touch platform. (You must use the Row Selectors widget anytime you want to select multiple rows.)
• Tooltips – use the popover style which is a tooltip style specially designed to meet the touch compatibility needs

Note: Since the igHierarchicalGrid internally uses the igGrid, the topics relating to these features are igGrid topics. The only exception is igGrid Group By feature for the igHierarchicalGrid, where the modal dialog differs between the two grids.

Related Content

igPopover

igPopover is supported on touch devices by default. In touch environment however, you cannot control the activating event: the control always shows on the tap user action, no matter what event has been set as activating (i.e. the setting of the showOn option is ignored).

Related topics

• igPopover Overview

Related samples

• Basic Usage
• ASP.NET MVC Basic Usage

igVideoPlayer

When running the igVideoPlayer control on a mobile device with the Modernizr library is available on the page, the browser’s default video player rendered to the user. If the Modernizr library is not available, then the actual igVideoPlayer control is rendered to the user (in some cases the igVideoPlayer control may have fewer touch capabilities than the default device controls).

Related Samples

• Video Player Basic Usage