CODEWITHSUNDEEP
kendo-gridkendo-ui-angular2
Dyd666
Dyd666

Reputation: 735

KendoGrid: weird scrolling while detail item is open

I have some weirds graphical issues scrolling the grid while having some detail items open. Template:

<kendo-grid
          [data]="gridView"
          [skip]="skip"
          [pageSize]="pageSize"
          [scrollable]="'virtual'"
          [rowHeight]="41"
          [height]="700"
          [detailRowHeight]="414"
          (pageChange)="pageChange($event)"
        >
        <template kendoDetailTemplate let-dataItem>
            <customKendoChart [chartTitle]="'A chart about '+dataItem.firstName"
                              [pollingTime]="1000"
                              [dataLength]="20"></customKendoChart>
        </template>
        <kendo-grid-column field="id" [width]="40" title="ID"></kendo-grid-column>
        <kendo-grid-column field="firstName" title="First Name" [width]="120"></kendo-grid-column>
        <kendo-grid-column field="lastName" title="Last Name" [width]="120"></kendo-grid-column>
        <kendo-grid-column field="city" title="City" [width]="120"></kendo-grid-column>
        <kendo-grid-column field="title" title="Title" [width]="120"></kendo-grid-column>
      </kendo-grid>

Component:

export class KendoGridComponent {
    private gridView: GridDataResult;
    private gridData: any[];
    private skip: number = 0;
    private pageSize: number = 30;

    constructor() {
        this.gridData = this.createRandomData(800000);
        this.loadGridItems();
    }

    private loadGridItems() {
        this.gridView = {
            data: this.gridData.slice(this.skip, this.skip + this.pageSize),
            total: this.gridData.length
        }
    }

    protected pageChange(event: PageChangeEvent): void {
        this.skip = event.skip;
        this.loadGridItems();
    }

    private createRandomData(count: number) {
        const firstNames = ["Riccardo", "Diego","Cristiano", "Gilberto", "Marco", "Angelo"],
            lastNames = ["Brazorf", "Fanfoni", "Pravettoni", "Maramotti"],
            cities = ["Ancona", "Topolinia", "Firenze", "Roma", "Jesi"],
            titles = ["Engineer", "Manager", "CEO", "Esterno"];

        return Array(count).fill({}).map((_, idx) => ({
                id: idx + 1,
                firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
                city: cities[Math.floor(Math.random() * cities.length)],
                title: titles[Math.floor(Math.random() * titles.length)]
            })
        );
    }
}

It looks like, whenever i scroll up or down, there's this weird refresh, in which i see for a sec the old detail item opened, replaced right after with the new items. Is it like that by design? http://plnkr.co/edit/83IijeVTardvh4lDnmOC?p=preview

Upvotes: 1

Views: 278

Answers (1)

rusev
rusev

Reputation: 1920

Indeed the previous content become visible while scrolling. It happens because the scroll position of the table gets reset, but the content is rendered yet.Maybe we can improve the experience by showing loading panel of some sort while scrolling. What do you think?

I've logged this scenario in kendo-angular2 repo. You can comment there if you like.

Upvotes: 2

Related Questions