Implementing Grouping in the ListView for Angular

Environment

Product

Progress® Kendo UI® for Angular ListView

Description

How can I implement a grouping functionality for the Kendo UI for Angular ListView? I need to organize the items in the ListView based on specific criteria.

Solution

To implement a grouping feature for the ListBox component:

1. Use the groupBy() method to group the data by the desired field.

   ts

   public groupedData: Destination[] | GroupResult[] = groupBy(
       this.destinations,
       [{ field: 'Country' }]
   );

2. Display the grouped data inside the component using the built-in ItemTemplateDirective.

   html

   <ng-template
       kendoListViewItemTemplate
       let-dataItem="dataItem"
   >
       <destination-card [data]="dataItem"></destination-card>
   </ng-template>

3. Optionally, you can order the data in ascending or descending order using the orderBy() method.

   ts

   public groupedData: Destination[] | GroupResult[] = groupBy(
       orderBy(this.destinations, this.sortDesc),[{ field: 'Country' }]
   );

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

Suggested Links

• ListView Overview
• API Reference of the ListView
• Using the ListView templates