如何以编程方式更改 Angular Kendo UI 网格页面索引?

问题描述 投票:0回答:3

这个问题是8 年前提出的,但是 Kendo UI 网格已经发展并且现在支持 Angular。原始问题的答案不适用于 Kendo Grid Angular。

我有一个剑道网格,如果数据少于一页,我会隐藏分页控件。

 template: `<kendo-grid #kendoGrid [kendoGridBinding]="gridView"
                        [pageSize]="pageSize" [pageable]="showPaginator()"

哪里

showPaginator(): boolean {
        return  this.gridView?.length > this.pageSize;
    }

如果第二页上只有一个项目,并且我删除了该项目,则网格会显示没有项目的第二页,但会隐藏分页控件。 我想选择网格的第一行,或者选择网格的第一页,但找不到执行此操作的 api 调用。

kendo-ui kendo-grid kendo-ui-angular2
3个回答
1
投票

为了选择网格的第一页,您需要使用 Kendo 的网格 state 来更改 skip,例如:

html

[pageSize]="state.take"
[skip]="state.skip"

ts

public removeItem() {
    //remove the item
    this.state.skip = 0;
    //reload items refreshing grid
}

如你所见,我也改变了

[pageSize]="state.take"
而不是
pageSize
。您可以在take上找到更多信息。


0
投票

由于某种原因,绑定“skip”属性在这里不起作用,我需要通过网格引用来设置它。这将设置所需的页面,但不会刷新网格。要刷新它,您需要触发一些事件,例如“sortChange”。

this.kendoGrid._skip = 0;
this.kendoGrid.sortChange.emit();

-2
投票

虽然第一个答案是正确的,但我想发布完整的解决方案,以便在不需要时隐藏分页工具栏,以及在删除页面上的最后一行时向后移动页面。

模板

     template: `<kendo-grid 
                    [kendoGridBinding]="gridView" 
                    [pageSize]="pageSize" [pageable]="showPaginator()" 
                    [skip]="skip"
                    (pageChange)="pageChange($event)">`

组件


    skip = 0;  // how many rows to skip
    pageSize: number = 20;
    _gridData = []; // original passed data 
    gridView: any[]; // store a slice of data if any filter are active

    // Each time the number of rows in the grid data changes
    // move back from last page if empty (eg deleted last item on last page)
    @Input() set gridData(values: any) {
              this._gridData = [...values];       
    } else if (values && values.length === 0) {
          this._gridData = [];
    }
    this.gridView = cloneDeep(this._gridData); // set initial view
  
    while ( (this.gridView.length <= this.skip ) && 
            (this.skip >= this.pageSize)) {
        this.skip = this.skip - this.pageSize;
      }
    }

    while ( (this.gridView.length <= this.skip ) && 
            (this.skip >= this.pageSize)) {
                this.skip = this.skip - this.pageSize;
            }
    }

    public showPaginator(): boolean {
      return  ((!!this.gridView) && (this.gridView.length > this.pageSize));
  }

  // Keep track of the current page.
  public pageChange(event: PageChangeEvent): void {
      this.skip = event.skip;
  }
© www.soinside.com 2019 - 2024. All rights reserved.