• Material
  • Fabric
  • Bootstrap
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection


This sample demonstrates grouping of dates and number types in the row and column headers of Pivot Grid.

Group Date by:
Group Product ID by:

In this sample, the date type can be separated and showcased individually as year, quarter, month, or day by selecting the appropriate option from the Group Date by drop-down list. Also, numbers can be grouped by entering the appropriate value in the Group Product ID by by giving a range number in the the numeric text box.

Grouping can be applied through code-behind using the groupSettings object in the pivot grid widget along with the following properties:

name : Specifies the normal field.
type : Specifies the field type for applying group settings. For example, date-formatted fields should be in "Date" type and number-formatted fields should be in "Number" type.
groupInterval : Specifies the interval for date fields in years, quarters, months, etc.
rangeInterval : Specifies the interval value to group the number field.