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

Posted 2023-05-08

【中文标题】具有服务器端分页/排序的 DevExtreme 数据网格不适用于过滤

【英文标题】：DevExtreme datagrid with server side paging/sorting not working with filtering

【发布时间】：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'
            );
        
      ,
    );
  

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

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

https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/WebAPIService/Angular/Light/ https://js.devexpress.com/Documentation/19_2/Guide/Widgets/DataGrid/Data_Binding/Custom_Sources/ https://js.devexpress.com/Documentation/Guide/UI_Components/PivotGrid/Use_CustomStore/

【参考方案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/

这就是它的样子