Version

Configuring Column Hiding (igGrid, RWD Mode)

Topic Overview

Purpose

This topic explains, with code examples, how to configure column hiding for the igGrid™ control in Responsive Web Design (RWD) mode.

Required background

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

In this topic

This topic contains the following sections:

Column Hiding Configuration Overview

The RWD mode has the functionality to hide/show columns based on the RWD profile. 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)

Column hiding can be configured in the following alternative ways:

  • On CSS Media Queries basis using CSS classes – by default, CSS classes use CCS 3 media queries
  • On a per-column basis in which you specify, for each column, whether to be hidden or shown for each individual profile.

Configuration on a per-column basis is the only available way for configuring column hiding if you have defined inline custom RWD mode or if you have implemented a custom RWD mode configuration which do not depend on CSS media queries.

Column hiding configuration summary chart

The following table briefly explains the available approaches for configuring RWD mode column hiding. Additional details are available after the table.

Configuration task Details Properties
Configuring Column Hiding Using CSS Classes Column hiding defined with CSS classes uses CSS 3 Media Queries.
Configuring Column Hiding Using the Profile Objects Column hiding defined in the individual column configurations is done using the InfragisticsMode class.

Configuring Column Hiding Using CSS Classes

Column hiding defined with CSS classes uses CSS 3 Media Queries. CSS classes are configured in the columnSettings property on a per column basis. The columnSettings.classes property follows the rules of setting the HTML element’s class attribute. You can set single class or multiple classes without the dot. When you set multiple classes, separate them with space.

Property settings

The following table maps the desired configuration to property settings.

In order to: Use this property: And set it to:
Hide a column using CSS classes for the Desktop RWD mode profile
  • key of the column
  • “ui-hidden-desktop”
Show a column using CSS classes for the Desktop RWD mode profile
  • key of the column
  • “ui-visible-desktop”
Hide a column using CSS classes for the Tablet RWD mode profile
  • key of the column
  • “ui-hidden-tablet”
Show a column using CSS classes for the Tablet RWD mode profile
  • key of the column
  • “ui-visible-tablet”
Hide a column using CSS classes for the Phone RWD mode profile
  • key of the column
  • “ui-hidden-phone”
Show a column using CSS classes for the Phone RWD profile
  • key of the column
  • “ui-visible-phone”

Example

This example demonstrates how to set column hiding based on CSS classes.

The ProductID column is configured to use the ui-hidden-tablet and ui-hidden-phone classes at the same time (this is done by separating them with space), i.e. it will not be visible in the Tablet and Phone profiles.

The ProductNumber column is configured to use the ui-hidden-phone class, i.e. it will not be visible in the Phone profile.

In JavaScript:

$("#grid1").igGrid({
    height: "100%",
    width: "100%",
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number"},
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
    ],
    autoGenerateColumns: false,
    dataSource: adventureWorks,
    responseDataKey: "Records",
    features: [
        {
            name: "Responsive",
            columnSettings: [
                {
                    columnKey: "ProductID",
                    classes: "ui-hidden-tablet ui-hidden-phone"
                },
                {
                    columnKey: "ProductNumber",
                    classes: "ui-hidden-phone"
                }
            ]
        }
    ]
});

In C#:

@using Infragistics.Web.Mvc
@model IQueryable<GridDataBinding.Models.Product>
@(Html.Infragistics()
    .Grid(Model)
    .ID("grid1")
    .AutoGenerateColumns(false)
    .Columns(col =>
    {
        col.For(c => c.ProductID).HeaderText("Product ID");
        col.For(c => c.Name).HeaderText("Product Name");
        col.For(c => c.ProductNumber).HeaderText("Product Number");
    })
    .Features(feature =>
    {
        feature.Responsive().ColumnSettings(cs =>
        {
            cs.ColumnSetting().ColumnKey("ProductID").Classes("ui-hidden-tablet ui-hidden-phone");
            cs.ColumnSetting().ColumnKey("ProductNumber").Classes("ui-hidden-phone");
        });
    })
    .DataBind()
    .Render())

Configuring Column Hiding Using the Profile Objects

Column hiding defined in the individual column configurations is done with the InfragisticsMode class in the columnSettings.configuration property which is an object whose properties are the names of the RWD mode profiles and whose values are objects having the hidden Boolean property for configuring column visibility.

Property settings

The following table maps the desired configuration to property settings.

In order to: Use this property: And set it to:
Hide a column using column configuration for the Desktop RWD mode profile
  • key of the column
  • true
Show a column using column configuration for the Desktop RWD profile
  • key of the column
  • false
Hide a column using column configuration for the Tablet RWD mode profile
  • key of the column
  • true
Show a column using column configuration for the Tablet RWD mode profile
  • key of the column
  • false
Hide a column using column configuration for the Phone RWD mode profile
  • key of the column
  • true
Show a column using column configuration for the Phone RWD mode profile
  • key of the column
  • false

Example

This example demonstrates how to set column hiding based on column configuration.

The ProductID column is configured to be visible in the Desktop profile (which is the default) and hidden in Tablet and Phone profiles.

In JavaScript:

$("#grid1").igGrid({
    height: "100%",
    width: "100%",
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number"},
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
    ],
    autoGenerateColumns: false,
    dataSource: adventureWorks,
    responseDataKey: "Records",
    features: [
        {
            name: "Responsive",
            columnSettings: [
                {
                    columnKey: "ProductID",
                    configuration: {
                        desktop: {
                            hidden: false
                        },
                        tablet: {
                            hidden: true
                        },
                        phone: {
                            hidden: true
                        }
                    }
                }
            ]
        }
    ]
});

In C#:

@using Infragistics.Web.Mvc
@model IQueryable<GridDataBinding.Models.Product>
@(Html.Infragistics()
    .Grid(Model)
    .ID("grid1")
    .AutoGenerateColumns(false)
    .Columns(col =>
    {
        col.For(c => c.ProductID).HeaderText("Product ID");
        col.For(c => c.Name).HeaderText("Product Name");
        col.For(c => c.ProductNumber).HeaderText("Product Number");
    })
    .Features(feature =>
    {
        feature.Responsive().ColumnSettings(cs =>
        {
            cs.ColumnSetting().ColumnKey("ProductID").Configuration(conf => {
                conf.AddColumnModeConfiguration("desktop", c => c.Hidden(false));
                conf.AddColumnModeConfiguration("tablet", c => c.Hidden(true));
                conf.AddColumnModeConfiguration("phone", c => c.Hidden(true));
            });
        });
    })
    .DataBind()
    .Render())

Related Content

Topics

The following topics provide additional information related to this topic.

View on GitHub