Infragistics(R) IgniteUI
Configuring Multi-Column Headers
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic explains how to configure the igGrid™ multi-column headers feature.

Required background

The following topics are prerequisites to understanding this topic:

Topic

Purpose

Multi-Column Headers (igGrid)

This topic explains the igGrid multi-column headers feature.


In this topic


Introduction

Multi-column headers summary

The multi-column headers feature provides header grouping. To accomplish this in the igGrid.options.columns array, there is a new option off of each column object called group. This option can contain an array of other column definitions. The group option is cascading, which means that you can group multi-column headers together. When defining a grouped column you can set the headerText, key and the rowspan properties. The headerText option is used to set the group caption, key is used to reference the column group when used with other features, and rowspan is used to adjust the span of the group header cell.
The multi-column headers API is exposed through the grid’s column objects. As with other features, you must add it to the igGrid.options.features array and also reference in the feature’s JavaScript files.
In the following screenshot, you see a multi-column header configured for the CompanyName, ContactName and ContactTitle columns.


Configuring Multi-Column Headers in JavaScript

Introduction

This procedure guides you through the process of configuring multi-column headers in the igGrid.

Preview

The following screenshot is a preview of the final result.

Overview

Steps

The following steps demonstrate how to configure multi-column headers in igGrid.

Step

Description

1. Reference the required JavaScript and CSS files.

The following code snippet is using Infragistics loader to reference Multi-Column Headers feature

In HTML:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script> 
<script src="infragistics.loader.js"></script>

In JavaScript:

<script type="text/javascript">
    $.ig.loader({
        scriptPath: "http://localhost/ig_ui/js/",
        cssPath: "http://localhost/ig_ui/css/",
        resources: "igGrid.MultiColumnHeaders"
    });
</script>
2. Define the data to bind to.

The following code defines a JavaScript array of objects. This data is used as the igGrid’s data source.

In JavaScript:

var northwindCustomers = [
{
    "CustomerID": "ALFKI",
    "CompanyName": "Alfreds Futterkiste",
    "ContactName": "Maria Anders",
    "ContactTitle": "Sales Representative",
    "Address": "Obere Str. 57",
    "City": "Berlin",
    "Region": null,
    "PostalCode": "12209",
    "Country": "Germany",
    "Phone": "030-0074321",
    "Fax": "030-0076545"
}, {
    "CustomerID": "ANATR",
    "CompanyName": "Ana Trujillo Emparedados y helados",
    "ContactName": "Ana Trujillo",
    "ContactTitle": "Owner",
    "Address": "Avda. de la Constituci\u00f3n 2222",
    "City": "M\u00e9xico D.F.",
    "Region": null,
    "PostalCode": "05021",
    "Country": "Mexico",
    "Phone": "(5) 555-4729",
    "Fax": "(5) 555-3745"
}];
3. Define the HTML placeholder.

In HTML:

3. Define the HTML placeholder.
<table id="grid1"></table>
4. Instantiate the igGrid.

In the following code, there are two groups defined.
The first is named “Company Information” and contains CompanyName, ContactName and ContactTitle columns.

The second is called “Address Information” and contains a Country column as well as another group column. The inner group is named “Local address” and contains the Address, City and PostalCode columns.

In JavaScript:

$.ig.loader(function () {
    $("#grid1").igGrid({
        autoGenerateColumns: false,
        dataSource: northwindCustomers,
        columns: [
            { headerText: "Customer ID", key: "CustomerID", width: "100px" },
            { headerText: "Company Information",
                group: [
                    { headerText: "Company Name", key: "CompanyName", width: "150px" },
                    { headerText: "Contact Name", key: "ContactName", width: "150px" },
                    { headerText: "Contact Title", key: "ContactTitle", width: "150px" }
                ]
            },
            { headerText: "Address Information", columnKey: "AddressInformation",
            group: [
                { headerText: "Local address",
                    group: [
                        { headerText: "Address", key: "Address", width: "150px" },
                        { headerText: "City", key: "City", width: "100px" },
                        { headerText: "PostalCode", key: "PostalCode", width: "100px" }
                    ]
                },
                { headerText: "Country", key: "Country", width: "100px" }
            ]}
        ],
        features: [
            {
                name: 'MultiColumnHeaders'
            }
        ]
    });
});


Configuring Multi-Column Headers in ASP.NET MVC

Introduction

This procedure guides you through the process of configuring multi-column headers in the igGrid.

Preview

The following screenshot is a preview of the final result.

Requirements

To complete the procedure, you need the following:

  • Microsoft ® Visual Studio 2010 or newer installed
  • ASP.NET MVC 3 Framework installed
  • The Northwind Database installed
  • A reference to the Infragistics.Web.Mvc.dll assembly
  • IgniteUI JavaScript and theme resources

Overview

Steps

The following steps demonstrate how to configure multi-column headers in igGrid.

Step

Description

1. Reference the required JavaScript and CSS files

In the Index.cshtml View, add the required JavaScript references and instantiate the Infragistics loader.

The following code snippet is using the Infragistics loader to reference the Multi-Column Headers feature

In HTML:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script> 
<script src="infragistics.loader.js"></script>

In C#:

@Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Resources("igGrid.MultiColumnHeaders")
.Render()
2. Define the model

Add an ADO.NET Entity Data Model for the Customers table of the Northwind Database and name it NorthwindModel.

3. Define the view

Open the Index.cshtml View and add the code below.

In the code there are two groups defined.
The first is named “Company Information” and contains the CompanyName, ContactName and ContactTitle columns.

The second group is called “Address Information” and contains a Country column as well as another group column. The inner group is named “Local address” and contains the Address, City and PostalCode columns.

In C#:

@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(false)
.ID("grid1")
.PrimaryKey("CustomerID")
.Height("400px")
.Width("100%")
.Columns(column =>
{
    column.For(x => x.CustomerID).HeaderText("Customer ID").Width("100px");
    column.MultiColumnHeader().HeaderText("Company Information").Group(c => {
        c.For(x => x.CompanyName).HeaderText("Company Name").Width("150px");
        c.For(x => x.ContactName).HeaderText("Contact Name").Width("150px");
        c.For(x => x.ContactTitle).HeaderText("Contact Title").Width("150px");
    });
    column.MultiColumnHeader().HeaderText("Address Information").Group(c => {
        c.MultiColumnHeader().HeaderText("Local address").Group(c2 => {
            c2.For(x => x.Address).HeaderText("Address").Width("150px");
            c2.For(x => x.City).HeaderText("City").Width("100px");
            c2.For(x => x.PostalCode).HeaderText("PostalCode").Width("100px");
        });
    });
    column.For(x => x.Country).HeaderText("Country").Width("100px");
})
.Features(features => { 
    features.MultiColumnHeaders();
})
.DataBind().Render()
Note:

Column key for multi-column header can be set by passing the key as argument to MultiColumnHeader chaining method.

Example: MultiColumnHeader(“companyInformation”)

4. Define the controller

In the Home controller’s Index action method, extract the Customers data from the Northwind database and return it with the View:

In C#:

public ActionResult Index()
{
    var dataContext = new NorthwindDataContext();
    var customers = dataContext.Customers.AsQueryable();
    return View(customers);
}


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

Landing page for topics related to igGrid features.


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

This sample shows how to configure multi-column headers.