Grouping with Summaries (igHierarchicalGrid)

Configuring Grouping with Summaries (igHierarchicalGrid)

Topic Overview

Purpose

Demonstrates, with code examples, the various ways to configure summary values calculation with the igHierarchicalGrid™ control’s Grouping feature.

Required background

The following lists the topics required as a prerequisite to understanding this topic.

• igHierarchicalGrid Overview: Provides conceptual information about the igHierarchicalGrid™ including information regarding features, binding to data sources, requirements, templates, and interaction.
• Initializing igHierarchicalGrid: Demonstrates how to initialize the igHierarchicalGrid using both jQuery and MVC.
• igHierarchicalGrid GroupBy Overview: Introduces the igHierarchicalGrid™ control’s grouping feature as well as providing an overview of the configurable aspects of the feature.

In this topic

This topic contains the following sections:

• Configuring Grouping with Summaries – Overview
• Code Example: Configuring a Summary with a Delimiter, Values Format, and a Built-In and Custom Functions
• Related Content

Configuring Grouping with Summaries – Overview

Configuring Grouping with Summaries chart

The configurable aspects of the igGridGroupBy control related to its use in igHierarchicalGrid.

Code Example: Configuring a Summary with a Delimiter, Values Format, and a Built-In and Custom Functions

Description

The code snippet below activates the Grouping feature of a layout in an igHierarchicalGrid and applies the following settings related to summary values calculation and display:

• A delimiter of comma and space (e.g. A, B)
• Formats summary values as fixed point decimal with one digit to the right of the decimal point and a leading zero to the left of the decimal point. If the value is less than 1: summaryFormat: "#0.0".
• For the Quantity column two summary functions are calculated:
• • The maximal value in the group with a text prefix “Max:” (e.g. Max: 55.0): summaryFunction: "max", text: "Max:".
  • A custom function called summaryDelta()used for summary value with a text prefix “Delta:”: summaryFunction: "custom", customSummary: summaryDelta, text: "Delta:".

Code: HTML and jQuery

In JavaScript:

Code: HTML and jQuery
...
features: [{
    name: 'GroupBy',
    inherit: true,
    summarySettings: { 
        multiSummaryDelimiter: ", ", 
        summaryFormat: "#0.0" 
    },
    columnSettings: [
        { columnKey: "Bin", isGroupBy: true },
        {
            columnKey: "Quantity",
            summaries: [{
                summaryFunction: "max",
                text: "Max:"
            }, {
                summaryFunction: "custom",
                text: "Delta:",
                customSummary: summaryDelta
            }]
        }
    ]
}]
...

Code: ASP.NET MVC

In ASPX:

Code: ASP.NET MVC
...
.Features(feature => {
    feature.GroupBy().Inherit(true)
    .SummarySettings(new GroupBySummarySettings { 
        SummaryFormat = "#0.0",
        MultiSummaryDelimiter = ","
    })
    .ColumnSettings(setting =>
    {
        setting.ColumnSetting().ColumnKey("Bin").IsGroupBy(true);
        setting.ColumnSetting().ColumnKey("Quantity").Summaries(summary =>
        {
            summary.Summary()
                .Text("Max").SummaryFunction(SummaryFunction.Max);
            summary.Summary()
                .Text("Delta").SummaryFunction(SummaryFunction.Custom).CustomSummary("summaryDelta");
        });
    });
});
...

Related Content

• Enabling and Configuring Grouping (igHierarchicalGrid): Demonstrates how to add grouping functionality to the igHierarchicalGrid™ control in both jQuery and MVC.