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.
The following lists the topics and articles required as a prerequisite to understanding this topic.
igGrid control and the functionalities this feature provides.igGrid control.This topic contains the following sections:
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.)
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
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
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
The following topics provide additional information related to this topic.
Configuring Column Hiding (igGrid, RWD Mode): This topic explains, with code examples, how to configure column hiding for the igGrid control in Responsive Web Design (RWD) mode.
Configuring Row and Column Templates (igGrid, RWD Mode): This topic explains, with code examples, how to define row and column templates for the individual Responsive Web Design (RWD) mode profiles of the igGrid control and how to configure automatic change of template when switching the active RWD mode profile.
Creating Custom Responsive Web Design (RWD) Profiles (igGrid): This topic explains, with code examples, how to create custom Responsive Web Design (RWD) mode profiles for the igGrid control.
Configuring Bootstrap Support (igGrid, RWD Mode): This topic explains how to configure Responsive Web Design (RWD) mode for the igGrid control using Twitter Bootstrap’s RWD classes.
View on GitHub