Is it possible to apply custom sort logic to a Data Grid Column

[David]

Hi,

Is it possible to apply custom sort logic to a Data Grid Column which is applied when clicking on the Column header? As an example, we have a Date column with nullable values. We would like nulls to be considered highest i.e.

• ascending: lowest date value -> highest date value -> null date values
• descending: null date values -> highest date value -> lowest date value

In the default sort nulls are considered lowest.

[Konstantin Dikov]

Hello David,

Currently the helper methods that we provide do not allow custom sorting function. We have logged issue for this, but at this point we could not elaborate when it will be available:

• https://github.com/telerik/kendo-react/issues/819

With the current implementation, the only possible solution would be to handle the data operations manually, using the sort expressions provided by the Grid and pass the data to the Grid's "data" property after applying the custom sorting. 

 

Regards,
Konstantin Dikov
Progress Telerik

[David]

OK, so you're saying we can sort the data manually but if the user clicks the column heading then that manual sort will be lost?

Kind regards,

David

[Konstantin Dikov]

Hi David,

Clicking on the Grid's header will change the sort expression passed to the onDataStateChange (onSortChange) event and nothing more. The Grid component does not have internal logic for applying data operations and in our examples we are using helper methods (like process, orderBy, etc.) that can use the expressions from the Grid's events. What I have suggested was to use a different method for applying the data operations based on the sort expressions. 

[David]

Thanks Konstantin,

Is it possible to provide an example of the solution you have proposed?

Kind regards,

David

[Konstantin Dikov]

Hi David,

I have created a simple example demonstrating how you can create a custom process method where you can handle all data operations manually:

• https://stackblitz.com/edit/react-dfnzci?file=app%2Fmain.jsx

The example handles the paging and sorting over single field, but you can extend it to include filtering and multi field support as per your exact requirements.

As you will notice, I have added custom sort compare function and you can extend it and add custom logic for particular fields.

Hope this helps.