How to sort filter items in DevExtreme data grid's headerFilter?
I am using the Data Grid of DevExtreme to display a large amount of data in a table with several columns. One of the columns is used to filter the data. Clicking on the filter icon shows a popup with all possible filter items as checkboxes. I want these items to be sorted alphabetically. How do I do this?
Let's consider the data source of the grid is an array of objects like this:
[{
name: 'Luke Skywalker',
movie: 'Star Wars'
},
{
name: 'Rantanplan',
movie: 'Luky Luke'
}
...(much much more)...
]
I created a configuration of the column that should provide filter possibilities like this (this is one of the objects of the data grid options columns array):
{
caption: 'Name',
dataField: 'name',
headerFilter: {
dataSource = function (options) {
options.dataSource.postProcess = function (results) {
return _.sortBy(results, (r: any) => r.text); // using lodash to sort items
};
}
}
But this only works for a small amount of filter items when the headerFilter data source's paging is not needed to display all possible items. As soon as paging is performed, the items are only sorted within their page.
I think the postProcess method may not be the right approach. What could I else try?
EDIT:
This shows the items I am writing about: 