在 Kendo Angular 网格上设置滚动位置

Question

当网格位于一条路线的组件中并且用户导航离开然后返回时，当前 kendo 网格失去其滚动位置并从顶部开始。有人知道 "remember" 滚动位置的方法，以便可以在网格上手动设置它吗？

Answer 1

这可以通过记住选择了哪一行，保存行的 ID，然后设置网格来完成属性 [selectedKeys]="id" 当用户返回时。

例如，如果网格数据基于产品数据，则保存最后查看的行 ID (ProductID)。当用户导航回网格时，您可以将保存的 ProductID 推送到绑定在网格上的数组。这将使该行被选中，要滚动到您可以使用 class k-state-selected 和 scrollIntoView 滚动的行该行进入视野。

这是一个基本的实现，但应该足以让您继续下去。我创建了一个 Stackblitz example 以便您了解如何实现它。确保使用 kendoGridSelectBy 和 selectedKeys 配置网格。 kendoGridSelectBy 应该与您推送到数组的 ID 相匹配。在我创建的示例中，它是 ProductID。

Answer 2

您可以将网格 skip 设置为与上次相同的值。你可以看看persist state examples。网格使用常规分页，但适用相同的原则。

Answer 3

这不是一个很好的解决方案，但暂时有效。这里是。在带有网格的组件内：

private _scrollPos: number;

@ViewChild("grid", { read: ElementRef }) gridEl: ElementRef;

constructor(private router: Router) { }

ngOnInit(): void {
    this.router.events.subscribe(e => {
        if (e instanceof NavigationStart) {
            let gridContent = this.getGridContentElement();
            if (gridContent.scrollTop > 0) {
                this._scrollPos = gridContent.scrollTop;
            }
        }
        else if (e instanceof NavigationEnd) {
            if (this._scrollPos > 0) {
                let gridContent = this.getGridContentElement();
                gridContent.scrollTo({ top: this._scrollPos });
            }
        }
    }
}

private getGridContentElement(): Element {
    let el = this.gridEl.nativeElement as HTMLElement;
    let gridContent = el.getElementsByClassName("k-grid-content").item(0);
    return gridContent;
}

在 Kendo Angular 网格上设置滚动位置

Setting scroll position on Kendo Angular Grid

kendo-ui-angular2