Angular Kendo Grid分页时筛选无匹配值不加载数据问题

问题原因 #

当你处于Grid第二页时通过外部搜索框触发筛选，Kendo Grid会尝试在筛选后数据集的第二页查找结果，但符合条件的"Decaffe"条目仅存在于原数据集的第一页，筛选后的数据集可能只有一页，导致第二页无数据显示。

修复步骤 #

每次触发外部筛选时，将Grid的页码重置为1，确保显示筛选结果的第一页：

1. 给Grid添加模板引用：在<kendo-grid>标签上添加#grid引用，用于获取Grid实例：

<kendo-grid 
  #grid
  [filterable]="true" [filter]="filter" 
  [pageSize]="4" [pageable]="true"
  [kendoGridBinding]="gridData">
  <!-- 列定义保持不变 -->
</kendo-grid>

2. 引入Grid组件并获取实例：在组件类中通过@ViewChild获取Grid实例，并在筛选后重置页码：

import { Component, ViewChild } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';
// 其他必要导入保持不变

@Component({
  // 组件元数据保持不变
})
export class AppComponent {
  @ViewChild('grid') grid!: GridComponent;

  // 原有filter、gridData定义保持不变

  public onFilter(inputValue: string): void {
    this.filter = {
      logic: 'or',
      filters: [
        {
          field: 'ProductName',
          operator: 'contains',
          value: inputValue,
        },
      ],
    };
    // 筛选完成后跳转到第一页
    this.grid.pageTo(1);
  }
}

修改后，每次触发外部筛选时，Grid会自动跳转到第一页，显示所有符合条件的结果。

内容的提问来源于stack exchange，提问作者sam sergiy klok