We recently had a scenario where we wanted our data grouped in a Grid. However, we needed a special order applied to the grouping. Alphabetical did not work for us based on a business requirement. In addition, the dataset we were working with was guaranteed to be limited to less than 30 records so paging would be turned off.
For our example, we will be working with a list of products. Here is a sample model used in the list:
{
ProductID: 1,
ProductName: 'Chai Tea',
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: '10 boxes x 20 bags',
UnitPrice: 1.49,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 901,
CategoryName: 'Teas',
Description: 'Teas',
Order: 1,
},
},
Out of the box, Kendo UI will allow you to easily group a dataset in a Kendo UI Grid. You can also sort it alphabetically ascending or descending. Here is a sample of the Angular code.
export class AppComponent implements OnInit {
public groups: GroupDescriptor[] = [{ field: 'Category.CategoryName' }];
public gridView: DataResult;
public ngOnInit(): void {
this.loadProducts();
}
private loadProducts(): void {
this.gridView = process(products, { group: this.groups });
}
}
Here is the Kendo Template. Notice setting groupable to false prevents the user from changing the grouping.
<kendo-grid
[groupable]="false"
[data]="gridView"
[height]="400"
[group]="groups"
>
<kendo-grid-column field="ProductID" title="ID" [width]="80"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" [width]="300"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" [width]="120"></kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
<ng-template kendoGridGroupHeaderTemplate let-value="value">
{{value}}
</ng-template>
</kendo-grid-column>
</kendo-grid>
The above code groups the data for the Grid to display as such:
Notice that the order of the groups is alphabetical. Sorry, adding some ads here to help pay for my WordPress annual subscription. Keep scrolling to the next section to see how to tweak the code.
How to change the order
The SME really wanted the “Teas” group to show first, then “Coffee” and finally “Soft Drinks”. You’re probably asking “Really???” But it really did make sense for the business requirements to order the data in such a way. We also really needed it in a Kendo UI Grid since there were many other features we needed for this feature.
You can easily change the grouping to use the “Order” property in the Category Model.
public groups: GroupDescriptor[] = [{ field: 'Category.Order' }];
But this will display the following which is not user friendly. The Group Descriptor is using the field as the value to display. But we want the value to be the Category Name.
So now we just need to tweak this a bit to get it to work as required. “loadProducts” needs to be changed to update the value to display. The call to “process” will order the data based on the grouping. Next we need loop through the view data, get the Category Name and put it in the group value which is then displayed when bound.
private loadProducts(): void {
//this.gridView = process(products, { group: this.groups });
var view = process(products, { group: this.groups });
view.data.forEach(x => { x.value = x.items[0].Category.CategoryName });
this.gridView = view;
}
We need to tweak the Group column in the template so the display is user friendly. The field will be bound to the Category.Order which is the same field we are ordering by.
<kendo-grid-column field="Category.Order" title="Category">
<ng-template kendoGridGroupHeaderTemplate let-value="value"> {{value}}
</ng-template>
</kendo-grid-column>
Now take a look at the grid. The grid is ordered using the Order field but the display shows Category Name. Just how the SMEs wanted it to work! Turns out what seemed like a challenging requirement was pretty simple to implement. Thanks Kendo UI! You saved the day again.
When you populate the “Order” property in your data, you can easily tweak the logic to what your business needs are. For instance, you can order by the number of items per group.
Note: The jQuery version of Kendo UI does allow for a “compare” function on the sort. See
It would be nice if Telerik would be consistent between the two versions of the framework.
Conclusion
Telerik’s Kendo UI components are rather powerful tools. They can easily speed up development once you get the hang of them.
Here is a working sample of the code:
References:
Doylestown Coder 
One thought on “Kendo UI for Angular: Customizing the order of Grouping in the Grid”