Configuring Responsive Web Design (RWD) Mode Overview (igGrid)

Topic Overview


This topic explains conceptually the elements of which configuring Responsive Web Design (RWD) mode consists – configuring column hiding and configuring the templates – and how these elements relate to each other.

Required background

The following lists the topics and articles required as a prerequisite to understanding this topic.

In this topic

This topic contains the following sections:

Configuring Responsive Web Design (RWD) Overview

Configuring RWD mode summary

The Responsive Web Design (RWD) mode can be configured to engage the following functionalities:

Column hiding and template-based configuration functionalities can be configured for use with Twitter Bootstrap RWD classes. (For details, refer to the Configuring Bootstrap Support topic.)

Configuring column hiding

Column visibility can be configured in the following ways:

  • By using CSS classes – with CCS 3 media queries. Each class collection is tested whether it produces visible elements which are then used to show or hide the column through the igGrid API.

    Note: CSS Media Queries are not supported on older browsers. For details, see CSS Media Queries Browser Support.

    CSS classes are configured in the columnSettings.classes property.

  • By configuration settings – configuration settings use the defined RWD mode profiles and the recognized active profile to determine the column’s visibility. By default, configuration settings use also CSS 3 media queries to determine the RWD mode profile. However if you do not want to depend on the CSS 3, then extending the $.ig.ResponsiveMode class gives you the opportunity to use window resize events.

Related Topics

Configuring the RWD mode templates

Column RWD Mode template is configured in the columnSettings.configuration option. The configuration option accepts an object literal with properties the names which are configured in responsiveModes option and the values are an object literal with a single property named as the template which contains the template string.

One column template is created for each configured profile. When the profile is activated, the grid is rendered according to the profile template.

Related Topics

Custom RWD mode configurations

The RWD mode has some predefined profiles: Desktop, Tablet, and Phone. In addition to that, you can create custom profiles. Custom profiles can be created either inline in the responsiveModes option or by extending the $.ig.ResponsiveMode class.

Related Topics

Related Content


The following topics provide additional information related to this topic.

View on GitHub