Version

Configuring Grouping (igCombo)

Grouping functionality will allow you to unite items into groups by certain criteria or common category.

Topic overview

Purpose

This topic explains how to use grouping functionality, possible configuration and briefly explanation of the main Grouping widget properties.

In this topic

This topic contains the following sections:

Introduction

The igCombo supports Grouping functionality that will enable the user to group together related items. This feature is included in version 15.2. The picture below demonstrate igCombo in which the items are grouped by car type in ascending order.

Note: By default the sort order is set to be ascending

Grouping overview

In order to enable combo grouping key property should be set. This property represents the name of column by which the records to be grouped. When combo is initialized all items will be grouped by that key in ascending order. Sort direction can be changed by using dir property as swhown in the code snippet below: In JavaScript:


$(".selector").igCombo({
    dataSource: data,
    textKey: 'name',
    valueKey: 'id',
    closeDropDownOnBlur: false,
    grouping: {
        key: 'carType',
        dir: 'desc'
    }
});

In ASPX:

@(Html.Infragistics().ComboFor(item => item.ID)
        .Width("400px")
        .DataSourceUrl(Url.Action("ComboDataLocation"))
        .ValueKey("ID")
        .TextKey("CarName")
        .CompactData(false)
        .Grouping(gr =>
        {
            gr.Key("Country");
            gr.Dir(ComboGroupingDirection.Desc);
        })
        .DataBind()
        .Render()
)

Note: When Load On Demand and Grouping are used it is recommended all datasource items to be sorted by the key which is used for grouping.

Related content

API help

Samples

The following samples provide additional information related to this topic.

View on GitHub