Infragistics(R) IgniteUI
igGrid Enabling GroupBy
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic demonstrates how to enable the grouping functionality in an igGrid™ in both jQuery and MVC patterns.

In this topic

This topic contains the following sections:

Introduction

The grouping functionality is managed by the name property of the igGrid: just pointing the name property to name: ‘GroupBy’ enables grouping by default. You need to just explicitly set the columns that you want to be grouped when the grid is created together with any additional properties you might want configured, like the sorting direction inside the group.

The example below configures a grid with the grouping feature enabled and the content grouped by default by one of the grid’s columns – Safety Level.

Preview

Following is a preview of the final result.

Requirements

General Requirements

Scripting Requirements

The required scripts for both jQuery and MVC sample are the same because the MVC wrappers just render a jQuery widget.

The following scripts are required to run the grid and its grouping functionality:

The following code sample demonstrates the scripts as added to the header code of the HTML file.

In HTML:

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

<script type="text/javascript" src="infragistics.lob.js"></script>

Database Requirements

For the purpose of this example only:

Enabling grouping in jQuery

Inside the $(document).ready() event handler you create an igGrid and then call its grouping feature to allow grouping by column. In the example code below the grid is sorted by default by one of its columns (SafetyStockLevel).

In Javascript:

$("#grid1").igGrid({
     features: [
         {
           name: 'GroupBy',
        columnSettings: [
        {
            columnKey: "SafetyStockLevel",
            isGroupBy: true,
               dir: "asc"
        }
        ]
       }
    ],
    dataSource: adventureWorks,
       responseDataKey: 'Records',
    autoGenerateColumns: true
});

To verify the result, open the HTML file in your browser. You should see the grid grouped by the default grouped column (as shown in the Preview above) and you should also able to group by other columns or undo the current grouping.

Enabling grouping in MVC

1. Create a LINQ to the SQL model.

Using the

2. Create an MVC Controller method.

Create MVC Controller method to get the data from the SQL Model and to call the View.

In MVC:

public ActionResult Default()
{
    var ctx = new AdventureWorksDataContext("ConnString");
    var ds = ctx.Products;

    return View("Events", ds);
}


3. Create the grid.

Define the grid itself along with the Group By feature and all his configurations:

In ASPX:

<%= Html.Infragistics()
.Grid(Model)
.ID("grid1")
.Features(feature => {
    feature.GroupBy().ColumnSettings(groupedGolumn =>
    {
        groupedGolumn.ColumnSetting().ColumnKey("Color").IsGroupBy(true);
    });
})
.AutoGenerateColumns(true)
.PrimaryKey("ProductID")
.Width("750px")
.DataBind()
.Render()%>

4. Save the project.

5. (Optional) Verify the result.

To verify the result, run your application. You should see the grid grouped by the default grouped column (as shown in the Preview REF above) and you should also able to group by other columns or undo the current grouping.

Custom Grouping Implementations

The grouping functionality allows for using a custom function to group the data using some criteria that differ from the default ones. For example, you may want to group a column based on the parity (the oddness or the evenness) of certain numbers. The following samples demonstrate how to implement some custom scenarios:

Custom Grouping by Date

Custom Grouping by Text

Custom Grouping by Name

Related Topics

Following are some other topics you may find useful.

Grouping Overview

Grouping Properties Reference

igGrid Known Issues and Breaking Changes

Related Samples

Following are some samples you may find useful.

Custom Grouping by Date

Custom Grouping by Text

Custom Grouping by Name