DataGrid for DevExtreme - How to apply custom sorting to a grouped column

This example demonstrates how to sort a grouped column. In this example, the California group is always displayed at the top of the grid.

You can implement the sorting technique in two following ways:

1. This solution is suitable for cases when paging and group summary are not used. Use the calculateGroupValue function to sort groups. This function returns values that are used for sorting and displays them in group headers. Use the groupCellTemplate property to revert the group header text to its initial value. Note that the remoteOperations property should be set to false.

2. The second solution is more universal. It correctly displays summaries and group row texts. It is possible to use remote operations (except the group paging) if a dedicated field is used on the server to sort groups. Use a calculated hidden column to create required cell values to sort them by Summary Group Info.

Files to Review

• jQuery
  • index.html
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • App.vue
• React
  • App.js
• NetCore
  • Index.cshtml

Documentation

• Getting Started with DataGrid

• DataGrid - API Reference

More Examples

• DataGrid for DevExtreme - How to disable selecting certain rows

• TreeList/DataGrid - How to implement a custom column chooser using a Popup with List