serverSelectFilter sorting issue

Webix JS
1

Hi Webix Team,

I’m using a serverSelectFilter in a Webix DataTable and loading options dynamically from an API. The issue I’m facing is that the dropdown options are always sorted in ascending order as strings, even when I sort them properly in JavaScript before returning them.

Here’s what I’ve tried:

  • Sorting the options on the client side before passing them to the filter.
  • Using a DataCollection to manage and sort the options before loading them.
    No matter what I try, Webix seems to ignore my sorting and automatically re-sorts the options alphabetically.

My Question:
Is there a way to apply API-based sorting so that the dropdown options appear in the exact order the server provides them? Or is there a built-in way to enforce custom sorting in the serverSelectFilter dropdown?

Thanks for your help!

2

Hello zkatanic,

To sort options in serverSelectFilter you can use onCollectValues and sort data as you need.
Please take a look at the example: Code Snippet

3

Thank you for the suggestion! However, I believe onCollectValues won’t work for my use case because my filtering options come from a separate API endpoint and not from the main datatable data.

My Setup:

  • My datatable is paginated, so it only loads 100 rows at a time, while the total dataset consists of hundreds of thousands of records.
  • Because of this, I cannot rely on onCollectValues, which only collects values from the currently loaded rows.
  • Instead, I have a dedicated API endpoint that provides all available filter options, which I pass to serverSelectFilter.

Problem:

  • Webix seems to ignore the order of the options returned by the API and sorts them alphabetically instead.
  • Even when I fetch and sort the options manually before returning them to Webix, it still re-sorts them.

What I Tried:

{
content: "serverSelectFilter",
options: function () {
  return webix.ajax().get("my_options_url").then(function (data) {
    let options = data.json();

    // Sorting by date before passing to Webix
    options.sort((a, b) => new Date(b.value) - new Date(a.value));

    console.log("Sorted Options:", options); // Shows correctly sorted data

    return options;
  });
}
}
  • The console log confirms that the data is sorted correctly before returning it.
  • But Webix still displays options alphabetically in the dropdown.

Is there a way to preserve server-side sorting in serverSelectFilter when using an external API for filtering options?

Would appreciate any guidance on how to ensure Webix respects the sorting from the API!

4

Hello @zkatanic ,

I’m afraid currently options for selectFilter will be inevitably sorted inside the private method called by collectValues.
The general purpose of this method is to return an array of options prepared equally from any datasource.
Filters that are based on Webix widgets (richSelectFilter, etc.) have their own API and sorting can be applied to them after options were loaded, but the selectFilter is based on HTML element and does not support this feature.

As a workaround, it is possible to create a custom filter that will inherit all features from selectFilter except the call for collectValues.

https://snippet.webix.com/e1ldclxo

Here the refresh method of selectFilter is almost completely copied from the sources (here it is on Github - /sources/ui/datafilter.js), but instead of private method for collecting data, there’s a custom logic to serialize data from a collection that fetches options from anywhere else (the Promise at lines 5-7 just imitates a slow request for testing purposes).

So far it is the most feasible workaround, but I agree that there should be a way to provide a custom sorting logic or to disable it at all. Thank you for pointing out the issue!

5

That works!

Thanks so much for the explanation!