具有服务器端分页/排序的 DevExtreme 数据网格不适用于过滤答案

【问题标题】：DevExtreme datagrid with server side paging/sorting not working with filtering具有服务器端分页/排序的 DevExtreme 数据网格不适用于过滤
【发布时间】：2021-10-20 14:45:05
【问题描述】：

分页和排序在服务器端按预期工作，并正确显示数据，但是当我单击启用过滤器的列时，显示所有内容（空白）

如果loadOptions.group 有一个值，则意味着过滤器正在请求在下拉列表中显示的唯一值

我知道我必须在客户端或服务器上过滤它，但是 必须返回什么结构（对象类型）才能使过滤显示唯一值以及如何填满了吗？


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'
            });
        }
      },
    });
  }

我已经检查了许多 stackoverflow 问题，并且还没有任何运气的 devextreme 支持论坛

我检查过的许多地方之一包括：

【问题讨论】：

标签： angular devextreme

【解决方案1】：

我上面的方法是错误的

这是完成的方式，使用给定列的dxo-header-filter

<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]
        }];
    }
}

取自：https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/How_To/Customize_Header_Filter_Data_Source/

这就是它的样子

【讨论】：