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.
igGridcontrol and the functionalities this feature provides.
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
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.
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.
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
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
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