This topic explains conceptually the Responsive Web Design (RWD) Mode feature of the
igGrid™ control and the functionalities this feature provides.
The following lists the topics and articles required as a prerequisite to understanding this topic.
igGridcontrol and its features explains, with code examples, how to add it to an HTML page.
igGridcontrol and its interaction with the data source component (igDataSource™).
This topic contains the following sections:
The Responsive Web Design (RWD) Mode feature of the
igGrid control adopts the concepts of Responsive Web Design in order to improve user experience on different devices. Responsive Web Design mode allows you to support multiple screen sizes and form factors with single code base and design.
The RWD Mode feature of
igGrid is based on the concept of design modes. The design mode defines the ability of the grid to adapt to different screen sizes for optimal content display. The
igGrid control supports the following design modes:
In this mode, the grid is not adapted to the device’s screens size. The Standard mode targets web sites/applications designed to be used on desktops.
In this mode, the grid is adapted to the device’s screens size. The adaptation can be based on the screen’s width, screen’s height or both. The RWD mode targets web sites/applications specifically designed to be used on multiple devices with different form factors.
In RWD mode, the grid’s adaptation to the devices’ screen can be configured to be either:
This is configured through the RWD mode feature’s column hiding functionality.
To this end, the RWD Mode feature supports a set of pre-defined grid templates which replace the
igGrid template once the RWD mode sets in. Using templates allows for a wide scope of adaptations, including row hiding, using different fonts and font sizes, merging several rows/columns in one row/column, and many others.
Only one mode can be active at a time.
igGrid control switches to RWD mode when the RWD Mode feature is activated; otherwise the control operates in Standard mode.
The RWD mode supports having different grid adaptations for different device screen sizes. A set of pre-defined adaptations to which a unique name is assigned is called “RWD mode profile”. A RWD mode profile is an object in which only one function, named
isActive, is required. This function is called by the Responsive Web Design Mode feature when a change in the size of the browser’s window is detected. If the
isActive function returns true, the profile gets activated.
Each profile has a range of screen sizes for which it is activated. Because different screen sizes are, in practice, associated with different types of devices, the RWD mode profiles are essentially associated with device types.
The igGrid control comes with the following pre-defined RWD mode profiles based on the device’s screen width. Those profiles are activated using CSS 3 media queries:
$.ig.InfragisticsModeclass is used by default. It chooses modes based on the visibility of a test element which is decided upon through the application of specific CSS classes decorated with media queries.
$.ig.BootstrapModeclass is similar to
$.ig.InfragisticsModebut uses classes defined in the CSS of the Twitter Bootstrap framework.
$.ig.ResponsiveModeis the base class that uses the browser window dimensions and compares them to user-set values.
The RWD profile is activated automatically (there is no API to set active profile). The media queries and the
$.ig.ResponsiveMode class, both recognize the profiles based on the width of the browser window and not that of the grid container. However because the grid container has its width set in percentages (this is a requirement for the RWD mode to work), the width of the browser window and the width of the container are related to each other. When the grid container width changes, the RWD Mode feature inspects each profile and sets the first profile for which the
isActive function returns true as active.
The RWD mode has the functionality to hide/show columns based on the RWD profile. Column hiding can be configured in the following alternative ways:
The following screenshots compare column hiding in the Phone and Tablet RWD mode profiles of the same grid:
|Phone profile (320 x 480 px)||Tablet profile (768 x 1024 px)|
In the Desktop profile, more columns are visible. The following picture demonstrates the same grid visualized in Desktop profile.
Desktop profile (1280 x 1024 px)
RWD mode templates are
igGrid templates configured per profile. As in the igGrid control, the RWD mode has column type of template. For example, using templates, in the Desktop profile, you may have
Address as separate columns and, in the Tablet profile, you can merge them into a single column.
The following screenshots demonstrate how the
igGrid looks in the different RWD profiles. In the Desktop profile, the grid has 3 columns:
Address. In the Tablet profile, the
Country column is hidden. In the Phone profile, the
City columns are hidden, but their data is appended to the
Desktop profile (1280 x 1024 px)
|Tablet profile (768 x 1024 px)||Phone profile (320 x 480 px)|
When there are RWD profile templates configured, the templates switch automatically together with profile activation.
If you are targeting a specific device, chances are that the default configuration of RWD mode profiles may not suit your needs. In this case, you will want to define custom RWD mode profiles.
Custom profiles can be defined either in the
responsiveModes property inline or by extending
$.ig.ResponsiveModeclass. Former approach is easier to configure, but is restricted on the
$.ig.ResponsiveMode class implementation on switching the modes. Latter approach gives you the chance to implement yourself the mode switching logic.
You can configure Twitter Bootstrap to be used for the RWD Mode profiles. RWD Mode feature (infragistics.ui.grid.responsive.js) has a class which supports Twitter-Bootstrap-framework-responsive CSS classes. This class is named
$.ig.BootstrapMode and is activated in the
Note: You need to include Twitter bootstrap CSS file in order to use the CSS class names.
The following table lists the configurable aspects of
igGrid Responsive Web Design (RWD) mode feature. Additional details are available in separate topics.
|Column hiding||You can specify which columns to be visible and which – hidden in each respective RWD mode profile. Related topics||
When configuring on CSS Media Queries basis (using CSS classes):
|Column template||You can specify an individual column template for each RWD mode profile. Column templates are defined individually for each column. Related topics|
|RWD mode profiles||You can specify custom RWD mode profiles in addition to the pre-defined profiles. Related topics||
|Bootstrap support||You can configure RWD mode using Twitter Bootstrap’s RWD classes. Related topics||
By default, RWD mode is configured to use
$.ig.InfragisticsMode class as a provider for the RWD mode configuration. This is done in the
responsiveModes option, which contains the RWD mode profiles where each profile is a string containing the name of the class which implements the logic of profile switching. The following table lists the default settings of the respective properties.
|responsiveModes.desktop||string||“infragistics”||The desktop profile is provided by
|responsiveModes.tablet||string||“infragistics”||The tablet profile is provided by
|responsiveModes.phone||string||“infragistics”||The phone profile is provided by
The following topics provide additional information related to this topic.
Enabling Responsive Web Design (RWD) Mode (igGrid): This topic explains, with code examples, how to enable the Responsive Web Design (RWD) mode in the
Configuring Responsive Web Design (RWD) Mode (igGrid): This is a group of topics explaining the various configuration tasks related to the Responsive Web Design (RWD) mode in the
igGrid control, like configuring column hiding, creating custom row and column templates, creating custom RWD configurations, and configuring RWD mode for use with Twitter Bootstrap.
View on GitHub