DevExtreme datagrid with server side paging/sorting not working with filtering

The paging and sorting works as expected on the server side and is showing the data correctly, but when I click on on a column with the filter enabled is showing everything with (Blanks)

If the loadOptions.group has a value it means that the filter is requesting the unique values to shown in the drop down

I know that I either have to filter that on the client or on the server, but what is the structure(type of object) that has to be returned in order to make the filtering show the unique values and how is it filled ?


getOrderDataStore(
    orderSearchRequest: OrderSearchRequest,
    failureAction: ActionCreator<string, FunctionWithParametersType<any, any>>,
    store: Store): CustomStore {
    return new CustomStore({
      load: (loadOptions) => {
        console.log({ loadOptions: loadOptions });
        orderSearchRequest.pageSize = loadOptions.take;
        orderSearchRequest.page = loadOptions.take === 0 ? 1 : Math.ceil(loadOptions.skip / loadOptions.take) + 1;

        if (loadOptions.group) {
          console.log("about to filter");
          let x: any[] = [];
          x.push({ id: 1, value: 'a' });
          x.push({ id: 2, value: 'b' });
          return x;

          /*
          states = [
            { id: 1, state: "Alabama", capital: "Montgomery" },
            { id: 2, state: "Alaska", capital: "Juneau" },
            { id: 3, state: "Arizona", capital: "Phoenix" },
            // ...
          ];
          
          return new ArrayStore({
            key: "id",
            data: x,
            // Other ArrayStore properties go here
          });
          */
        }
        else {
          return this.searchOrder(orderSearchRequest)
            .toPromise()
            .then(response => {
              console.log({ getOrderDataStore: response.result.orders })
              return {
                data: response.result.orders,
                totalCount: response.result.totalCount
              };
            })
            .catch(() => {
              store.dispatch(failureAction({ error: 'Data loading error' }))
              throw 'Data loading error'
            });
        }
      },
    });
  }

I have checked many stackoverflow questions and also devextreme support forums without any luck

One of the many places I have checked include:

Solution

My aproach above was wrong

This is the way is done, using the dxo-header-filter for the given column

<dx-data-grid ... >
    <dxi-column ... [allowHeaderFiltering]="true">
        <dxo-header-filter
            [dataSource]="headerFilterData">
        </dxo-header-filter>
    </dxi-column>
</dx-data-grid>

export class AppComponent {
    headerFilterData: any;
    constructor() {
        this.headerFilterData = [{
            text: "Zero",
            value: 0
        }, {
            text: "Less than $3000",
            value: ["SaleAmount", "<", 3000]
        }, {
            text: "More than $3000",
            value: ["SaleAmount", ">", 3000]
        }];
    }
}

Taken from : https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/How_To/Customize_Header_Filter_Data_Source/

And this is how it looks