The dxPivotGrid widget supports data grouping for header items and field grouping. These types of grouping are essentially different. The detailed description of each grouping type is presented below.

Data Grouping

NOTE: Data grouping configuration is available only for the pivot grid data sources whose store differs from the XmlaStore. If the pivot grid is configured for displaying data of a remote OLAP cube, an OLAP server provides the grouped data.

Pivot grid's way of displaying information requires data to be split into independent chunks. For dimensions, these chunks are called header items and the process of their generation is called data grouping. Each header item is a condition for calculating summary values. There are many different ways to generate header items from data. The function responsible for splitting data is called selector. The default selector returns the unique values of the dataType among all the dataField values. This article describes how to configure the selector function and implement your own.

Selector customization

The data selector for fields whose dataType is number or date is configured using the groupInterval option.

Grouping numbers

To configure a data selector for numeric data, assign a number to the groupInterval option. The number assigned is the maximum length of each group. The bigger the number, the less the quantity of the generated groups.

For instance, consider a field whose values belong to an interval from 0 to 35. If groupInterval is set to 10, the following groups will be generated: 0-9, 10-19, 20-29 and 30-35. If groupInterval is set to 20, groups will be the following: 0-19, 20-29 and 30-35.

Grouping dates

To configure the data selector for dates, assign one of the following strings to the groupInterval option:

  • "year" — group by years
  • "quarter" — group by quarters
  • "month" — group by months
  • "day" — group by days
  • "dayOfWeek" — group by days of the week

A sample column area configuration is presented below.

fields: [
    { area: "column", dataField: "OrderDate", dataType: "date", groupInterval: "year" },
    { area: "column", dataField: "OrderDate", dataType: "date", groupInterval: "quarter" },
    { area: "column", dataField: "OrderDate", dataType: "date", groupInterval: "month" },
    { area: "column", dataField: "OrderDate", dataType: "date", groupInterval: "day" }

Manual grouping

If you need to split data into groups in a custom way, implement a selector function. In this function, check the current field's value and return the group to which this value belongs. The default selector function acts in the following way.

  1. The dataField value is acquired from the dataSource.
  2. The acquired value is casted to the type specified in the dataType option.
  3. The header item value is calculated according to existing items and the groupInterval value.

When implementing your own selector function, follow a procedure similar to the one described above. Keep in mind that the dataType and groupInterval options are ignored when the selector function is defined. Also, the field's current value is not passed to the selector function explicitly, you should manually take it from the data source. This will allow you to build a selector for grouping data based on the values of several fields.

For instance, the alphabetic selector for strings can be implemented as follows.


By default, values returned by the selector function are displayed in the UI as group names. If you need to change the text to be displayed in header groups, implement the customizeText function.

Fields Grouping

NOTE: Fields Grouping essentially differs from from the Data Grouping described above.

If your field set contains typical dimensions, such as Calendar Date, you can organize fields related to them into groups. The pivot grid's group of fields concept is similar to the hierarchy OLAP concept. A group will be displayed in the Field Chooser as a single field, but when you put a group into an area, then that action is similar to putting a set of fields in a corresponding order in that area.

To create a group, follow the steps below.

  1. Assign the new group's name to the groupName option of each field you need to group.
  2. Order the fields within a group by setting the groupIndex option of each field within a group. The order of fields is important because it affects the structure of the resulting hierarchy; for details refer to the Areas article.
  3. Create a field that will represent a group in a fields array. To do this, add a new object to the fields array. Configure the groupName and area of a newly added object. Define whether the group contains dimensional fields or measures using the isMeasure option. If the groupName value should not be displayed in the UI (Field Chooser), configure the group's caption. If you need to filter data by group values, assign an array of arrays to the filterValues option. Each item of the filterValues array should contain a filtering value for each field in the group.

NOTE: When you create a group, fields that belong to this group disappear from the Field Chooser. If you need to display them along with the group, duplicate each field without specifying the groupName and groupIndex. If you have a group and its fields are displayed in the Field Chooser, consider putting them all into a folder using the displayFolder option.

The sample implementation of the Date dimension is presented below.

fields: [{
    dataField: 'OrderDate',
    groupInterval: 'year', 
    dataType: 'date',
    groupName: 'OrderDateGroup',
    groupIndex: 0
}, {
    dataField: 'OrderDate', 
    groupInterval: 'quarter', 
    dataType: 'date',
    groupName: 'OrderDateGroup',
    groupIndex: 1
}, { 
    dataField: 'OrderDate', 
    groupInterval: 'month', 
    dataType: 'date',
    groupName: 'OrderDateGroup',
    groupIndex: 2
    groupName: 'OrderDateGroup',
    area: 'column',
    caption: 'Order Date'