这个问题是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 调用。
由于某种原因,绑定“skip”属性在这里不起作用,我需要通过网格引用来设置它。这将设置所需的页面,但不会刷新网格。要刷新它,您需要触发一些事件,例如“sortChange”。
this.kendoGrid._skip = 0;
this.kendoGrid.sortChange.emit();
虽然第一个答案是正确的,但我想发布完整的解决方案,以便在不需要时隐藏分页工具栏,以及在删除页面上的最后一行时向后移动页面。
模板
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;
}