Infragistics(R) IgniteUI
Touch Support for Ignite UI Controls
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic introduces the updates to IgniteUI™ controls for touch-support interactions.

In this topic


Touch Support Functionality

Introduction

All the IgniteUI controls now 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 IgniteUI 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 IgniteUI controls. The controls are work well without Modernizr, but when the library is available on the page, the controls adapt to a more touch-friendly mode.

Touch Support controls summary

The following table summarizes the controls that have new or updated features to support touch-support capable features. Not all of the controls needed touch compatibility integration, because they support touch interactions by default. Additional details are available for each updated control after the table.

Control

Description

igVideoPlayer

When Modernizr library is available igVideoPlayer falls back to the default browser video player.

igGrid

Some of the features include new properties that allow touch-optimized interaction. The three grid features – Group By, Hiding and Sorting feature a new modal window that allows dynamic changes to the grid.

igHierarchicalGrid

The igHierarchcialGrid internally uses the igGrid widget; therefore all the new features from igGrid are also available in the igHierarchicalGrid widget.

igScroll

Internal widget that allows all the IgniteUI controls to be scrollable.


igVideoPlayer

When running the igVideoPlayer control on a mobile device when the Modernizr library is available on the page, the default browser controls are rendered to the user. If Modernizr 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 Sample

igGrid

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

Feature

Description

Feature Chooser

Related topics

Related sample

The Feature Chooser has new sections, which group the grid’s different features semantically. It is optimized to support touch interactions.

Multiple Sorting

Related topics

Related sample

The igGrid control allows multiple sorting through the advanced modal dialog available via the Feature Chooser or by using the sorting API methods. New events and methods are available for the Multiple Sorting dialog window functionality.

The modal dialog has two states. First, you can make multiple changes to the sort criteria and then apply them at once (default); the other state applies the sort immediately when the user clicks or taps the column.

Hiding

Related topics

Related sample

The igGrid columns can be hidden using the Column Chooser dialog window. New events and methods are available which allow you to programmatically work with the Column Chooser dialog window.

The modal dialog has two states. First, you can hide multiple columns and then apply all the changes at once; the other state applies the column hiding immediately when the user clicks or taps on a column.

Group By

Related topics

Related sample

You can group the grid by selecting columns from a new advanced modal window. New events and methods are available which allow you to programmatically use the Group By dialog window.

The modal dialog has two states. First, you can group by multiple columns and then apply all the changes at once; the other state applies the column grouping immediately when the user clicks or taps on a column.

Tooltips

Related topics

Related sample

A new tooltip style is added to meet the touch compatibilities needs.

Multiple Selection

Related topics

Related sample

New selection properties are added that allows you to select multiple cells under touch platforms.

Row Selectors

Related topics

Related sample

You need to explicitly define row selectors, when you want to select multiple rows under touch platform.

Note: This is not a new feature, but you must use the Row Selectors widget anytime you want to select multiple rows.

igHierarchicalGrid

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

When you need to enable a property or a feature to make the igHierarchicalGrid touch compatible, you configure the settings for the feature in the same way for the igGrid control.

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.

Control

Description

Feature Chooser

Related topics

Related sample

The Feature Chooser has new sections, which group the grid’s different features semantically. It is optimized to support touch interactions.

Multiple Sorting

Related topics

The igHierarchicalGrid allows multiple sorting through an advanced modal sorting dialog. You can expose the dialog from Feature Chooser or by using the sorting API methods.

New events and methods are available which allow you to programmatically use the Multiple Sorting dialog window.

The modal dialog has two states. First, you can sort multiple columns and then apply all the changes at once; the other state applies the column sorting immediately when the user clicks or taps on a column.

Hiding

Related topics

Related sample

The igGrid columns can be hidden using the Column Chooser dialog window. New events and methods are available which allow you to programmatically work with the Column Chooser dialog window.

The modal dialog has two states. First, you can hide multiple columns and then apply all the changes at once; the other state applies the column hiding immediately when the user clicks or taps on a column.

GroupBy

Related topics

Related samples

You can group the hierarchical grid by selecting columns from a new advanced modal window. New events and methods are available which allow you to programmatically use the Group By dialog window.

The dialog window allows you to select the level of hierarchy in which you group the grid.

The modal dialog has two states. First, you can group multiple columns and then apply all the changes at once; the other state applies the column grouping immediately when the user clicks or taps on a column.

Tooltips

Related topics

igGrid Tooltips Popover

A new tooltip style is added to meet the touch compatibilities requirements of the grid.

Multiple Selection

Related topics

New selection properties are added that allows you to select multiple cells under touch platforms. For igHierarchicalGrid you will need to enable the selection feature in the parent grid, because the selection feature is not inherited.

RowSelectors

Related topics

Related sample

Row selectors are your only option when you want to select multiple rows under touch platform.

Note: This is not a new feature, but you must use Row Selectors widget anytime you want to select multiple rows.

igScroll

All the IgniteUI controls support scrolling by default when running under a touch-enabled environment. The scrolling behavior is controlled by the internal igScroll component. You can use the igScroll component to make other HTML elements scrollable, like DIV for example:

In HTML:

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

In this way the igScroll component makes the container scrollable under touch browsers.

Mobile Page Best Practices

IgniteUI 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 IgniteUI 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" />


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This topic demonstrates the feature chooser menu and its sections.

This topic demonstrates how to use the Multiple Sorting Dialog Window.

This topic demonstrates how to use the Hiding Column Chooser.

This topic demonstrates how to use the igGrid Group By Modal Dialog.

This topic demonstrates how to configure the Tooltips Popover style.

This topic demonstrates how to configure Multiple Cell Selection for both Desktop and Touch environments for the igGrid control.

This topic demonstrates how to enable row selectors (which are the only way to select multiple rows under touch platforms).

This topic demonstrates how to enable row selectors for the hierarchical grid (which are the only way to select multiple rows under touch platforms).


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

Video Player Display options

Run the sample through touch device to see its behavior.

Shows how the Feature Chooser appears when more than two features, that have indicator in the head, are enabled.

Shows how the Feature Chooser appears when more than two features, that have indicator in the head, are enabled.

Sample that shows how the both modal dialogs for sorting and hiding look like and which events are fired during user interaction.

Sample that shows the events that the igGrid GroupBy modal dialog fires during user interaction.

Sample that shows the events that the igHierarchicalGrid GroupBy modal dialog fire during user interaction.

Sample that shows how to enable Popover style of the Tooltips

Sample shows how to configure Selection so that you enable multiple cell selection for touch devices.

Sample that shows how to enable Row Selectors for the igGrid control.

Sample that shows how to enable Row Selectors for the igHierarchicalGrid control.


Resources

The following material (available outside the Infragistics family of content) provides additional information related to this topic.

Title

Purpose

Using the viewport meta tag to control layout on mobile browsers

Provides an example of how to configure the view port meta tag making the page touch friendly.

Modernizr

The official site of the Modernizr library.