GroupBy Summaries Feature Overview (igGrid)

Topic Overview

Purpose

This topic introduces the GroupBy Summaries functionality of the igGrid™.

In this topic

This topic contains the following sections:

• GroupBy Summmaries Feature Overview
• Enabling GroupBy Summmaries
  • Basic settings
  • Advanced settings
  • Custom Summaries
• Related Content

GroupBy Summmaries Feature Overview

The GroupBy Summaries feature allows an additional summary row to be displayed below, on top or both for each group data island that displays summary information for the data columns in that island. The summary row is visible only when the related group is expanded. The image below demonstrates a grid with grouped columns where below each group the total sum of the "Price" column is displayed in a summary row:

This feature allows the user to display the result for either a default summary function (Sum, Min, Max, Avg etc.) or a custom one in order to provide a meaningful summary of the data group.

This feature can also be combined with the igGrid Summaries feature in order to display summary information for the whole data in the grid footer.

Enabling GroupBy Summmaries

Basic settings

In order to enable the group summaries feature the groupSummaries option should be enabled:

$("#grid1").igGrid({
     features: [
       {
           name: 'GroupBy',
           groupSummaries: true
       }
    ],
    dataSource: data
});

When enabled the grid will render the default summaries for the related column type. The default column summaries per column type are:

Below you can see an example result with the default settings:

The applicabe column types as well as other default summaries related options can be modified via the $.ig.util.defaultSummaryMethods array.

The summary method object in the $.ig.util.defaultSummaryMethods array has the following options:

Advanced settings

The following list contains information on the main summaries related options.

The groupSummaries option allows enabling/disabling the summaries by setting true/false or specifying an array of the default summary methods that will be applied for all columns that allow that summary type. The below example demonstrates specifying a single default summary of type "Sum":

$("#grid1").igGrid({
   features: [
    {
           name: "GroupBy",
        initialExpand: false,
        groupSummaries: [
            {
                summaryFunction: "Sum",
                label: "Total = "
            }
        ]
     ]
    dataSource: data
});

This summary will be applied for all columns whose data type allows applying it. In this example since the "Sum" summary is only applicable for numeric columns only the numeric columns in the grid will have a "Sum" summary displayed in the summary row.

The columnSettings.groupSummaries option allows specifying a summary per column, which takes higher priority than the groupSummaries main level option. When this option is set for a particular column any settings related to this column from the main groupSummaries option are disregarded.

The groupSummariesObject used for specifying the summary options has the following properties:

They allow futher customization of the look of the summary when it gets displayed in the grid summary row.

Custom summaries

Custom summaries allow specifying a custom function for aggregating the data from the data islands. In order to set a custom summary you can set a function to the summaryFunction property of the group summaries object.

The group summaries object can be added to one of the following collections, which will determine which columns the custom summary will be applied to as follows:

The function accepts the data from the data island and should return the summary result for it.

Custom Summary Example:

$("#grid1").igGrid({
    features: [
         {
            name: "GroupBy",
            initialExpand: false,
            columnSettings: [
                {
                    columnKey: "ExisitingCustomer",
                    groupSummaries: [
                     {
                         summaryFunction: existingCount,
                         label: "Existing Count: "
                      }
                    ]
                }
        }
    ],
    dataSource: data
 });

function existingCount(data, dataType) {
    var i, count = 0; 
    for (i = 0; i < data.length; i++) {
        if(data[i] === "Y"){
           count++;
       }
    }
    return count;
}

Related Content

Related Samples

The following sample provides additional information related to this topic.

• Grouping with summaries

Topics

The following topics provide additional information related to this topic.

• Enabling Column Grouping (igGrid)

• Grid Group By Properties Reference