Grouping

This sample shows grouping support in the FlexGrid. Most of the work is done by the CollectionView class used as a data source for the grid. To add grouping, add one or more GroupDescription objects to the CollectionView.groupDescriptions property, exactly as you would do in .NET, and ensure that the grid's showGroups property is set to true.

You can customize the text that is displayed in group header rows using the grid's groupHeaderFormat property. By default, this displays the name of the group, for example, Country, followed by the current group and the number of items in the group. Use the format property on each Column object to format aggregated data displayed in the group header for that column. Notice how we use the column's aggregate property to specify how to aggregate the data for each column.

This sample uses the WjFlexGrid, WjFlexGridColumn, and WjCollectionViewNavigator components for Angular 2.

(no grouping) Country Product Country and Product Product and Country Product, Country and Amount Arabic (U.A.E.) Basque Bulgarian Catalan Chinese Chinese (Traditional, Hong Kong SAR) Chinese (Traditional, Taiwan) Croatian Czech Danish Dutch English English (United Kingdom) Estonian Finnish French French (Canada) Galician German Greek Hebrew Hindi Hungarian Indonesian Italian Japanese Kazakh Korean Latvian Lithuanian Norwegian Polish Portuguese Romanian Russian Serbian Slovak Slovenian Swedish Thai Turkish Ukrainian
5 50 500 5,000 50,000 100,000 500,000 1,000,000

Current Item

ID
{{flex.collectionView.currentItem?.id}}
Country
{{flex.collectionView.currentItem?.country}}
Product
{{flex.collectionView.currentItem?.product}}
Color
{{flex.collectionView.currentItem?.color}}
Amount
{{flex.collectionView.currentItem?.amount | number:'1.2-2'}}