如果当前页面没有搜索值，角剑道网格不会在过滤器更改事件上加载数据

Question

我有一个包含几页的网格。假设第一页上有一个项目“Decaffe”，我打开了第二页。 然后，我通过使用 onFilter 事件，在网格外的单独搜索框中键入单词“Deacaffe”来应用过滤器。网格变空，没有返回结果。 我附上它的stackblitz example。 如何解决这个问题？我假设需要额外的刷新..

@Component({
  selector: 'my-app',
  template: `
  <kendo-textbox (valueChange)="onFilter($event)"></kendo-textbox>
    <br/>
    <hr/>
        <kendo-grid 
          [filterable]="true" [filter]="filter" 
          [pageSize]="4" [pageable]="true"
          [kendoGridBinding]="gridData">
            <kendo-grid-column field="ProductID" title="ID"> </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name"> </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category"> </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price"> </kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  public filter: CompositeFilterDescriptor = {
    logic: 'and',
    filters: [
      {
        field: 'ProductName',
        operator: 'startswith',
        value: 'Chai',
        ignoreCase: true,
      },
    ],
  };

  public onFilter(inputValue: string): void {
    this.filter = {
      logic: 'or',
      filters: [
        {
          field: 'ProductName',
          operator: 'contains',
          value: inputValue,
        },
      ],
    };
  }

  public gridData: Product[] = [
    {
      ProductID: 1,
      ProductName: 'Chai',
      UnitPrice: 18,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
      },
    },

Answer 1

解决方法之一是您可以应用自己的手动过滤和手动分页

StackBlitz：https://stackblitz.com/edit/angular-dkdvup-v7x2ee?file=src/app/app.component.ts

Answer 2

我通过将 DataBindingDirective 与 ViewChild 指令一起使用并在过滤事件中调用 skip 方法找到了相对简单的解决方案。在我的例子中，所有网格都是预加载的，否则你可以像以前的答案一样用适当的分页加载它......这会涉及更多的编码。 工作解决方案：StackBlitz.

export class AppComponent {
  @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;

  public filter: CompositeFilterDescriptor = {
    logic: 'and',
    filters: [
      {
        field: 'ProductName',
        operator: 'startswith',
        value: '', 
        ignoreCase: true,
      },
    ],
  };

  public onFilter(inputValue: string): void {
    console.log(`onFilter - ${inputValue}`);

    if (inputValue) {
      this.filter = {
        logic: 'or',
        filters: [
          {
            field: 'ProductName',
            operator: 'contains',
            value: inputValue,
          },
        ],
      };
    } else {
      this.filter = {
        logic: 'or',
        filters: [],
      };
    }

    //the binding directive reference was used to set the skip property to 0. This is to ensure that the user will be returned to page 1 when filtering the Grid data.
    this.dataBinding.skip = 0;
  }