CODEWITHSUNDEEP
angularkendo-gridkendo-ui-angular2
Max Kilovatiy
Max Kilovatiy

Reputation: 798

Kendo-ui-angular2 grid Horizontal scrolling issue in IE 11

I faced with lack of performance in IE 11 when trying to scroll Kendo UI Angular2 grid horizontally. From time to time number of columns may changed. At least I have 30 columns each time. IE either freeze UI for more than 10 seconds, or even crashed.

My grid version is 0.5.0. Here is my grid settings:

<kendo-grid
    [data]="view"
    [scrollable]="'virtual'"
    [height]="gridHeight"
    [pageSize]="pageSize"
    [rowHeight]="rowHeight"
    [skip]="skip"
    [sortable]="{ mode: 'multiple' }"
    [sort]="sort"
    (sortChange)="sortChange($event)"
    (pageChange)="pageChange($event)">
    <template ngFor [ngForOf]="columns" let-column>
        <kendo-grid-column
            field="{{column}}"
            [headerStyle]="{'border': 'none', 'font-size': 'medium'}"
            [width]="computeWidth(column)"
            [style]="{'border': 'none', 'font-size': 'small'}">
            <template kendoCellTemplate let-dataItem>
                <div>
                    {{dataItem[column] | truncate : 75 }}
                </div>
            </template>
        </kendo-grid-column>
    </template>
</kendo-grid>

EDIT: update grid up to 0.6.2, same thing with IE even Chrome thinking longer than expected. Example is here

Upvotes: 0

Views: 1535

Answers (1)

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

When using virtual scrolling, don't bind the grid to the complete data (thousands of rows), but only to the currently paged data. This is what makes the virtual scrolling fast -- only the currently visible data is rendered. This is shown in the virtual scrolling example in the documentation.

private loadProducts(): void {
    this.gridData = {
        data: this.data.slice(this.skip, this.skip + this.pageSize),
        total: this.data.length
    };
}

See the updated plunker snippet.

Upvotes: 1

Related Questions