This is a migrated thread and some comments may be shown as answers.

In an Angular kendo grid- virtual scrolling pageChange event not getting trigger

1 Answer 1185 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
archana asked on 07 Mar 2021, 07:51 AM

-I am using kendo grid, I want column wise search, sort, save state with virtual remote scrolling.


I tried sample with my API. kendo grid data binding works. in following code pageChange event is not getting trigger. I tried various changes in here even on owheight changes, event get trigger/fired. Please suggest changes that require to virtual scroll work as expected. 




import { Component, ViewEncapsulation } from '@angular/core';
import { tap, switchMap } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';
import { OrdersService } from './user_kendo.service';

    selector: 'my-app',
    providers: [OrdersService],
     * Set a fixed row height of 36px (20px line height, 2 * 8px padding)
     * [row height] = [line height] + [padding] + [border]
     * Note: If using the Kendo UI Material theme, add 1px to the row height
     * to account for the bottom border width.
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .k-grid tbody td {
            white-space: nowrap;
            line-height: 20px;
            padding: 8px 12px;
    template: `
          [data]="query | async"

        <kendo-grid-column field="userName" [width]="80" title="User Name"></kendo-grid-column>
        <kendo-grid-column field="name" title="Name" [width]="200"></kendo-grid-column>
        <kendo-grid-column field="emailAddress" title="EmailAddress" [width]="200"></kendo-grid-column>
export class UserKendoComponent {
    public loading: boolean;
    public state: any = {
        skip: 0,
        take: 100
    public query: any;
    private stateChange = new BehaviorSubject<any>(this.state);

    constructor(private service: OrdersService) {

        this.query = this.stateChange.pipe(
            tap(state => {
                this.state = state;
                this.loading = true;
            switchMap(state => service.fetch(state)),
            tap(() => {
                this.loading = false;

    public pageChange(state: any): void {;


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toODataString } from '@progress/kendo-data-query';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { GridDataResult } from '@progress/kendo-angular-grid';

export abstract class NorthwindService {
    private BASE_URL = 'https://localhost:44301/api/services/app/User/GetUsersForKendo';

        private http: HttpClient,
        protected tableName: string
    ) {
    public fetch(state: any): Observable<GridDataResult> {

        return this.http
            .get(`${this.BASE_URL}?` + 'skip=' + state.skip + '&top=' + state.take)
                map((response:any) => (<GridDataResult>{
                    data: response.result.items,
                    total: parseInt(response.result.totalCount, 10)


export class OrdersService extends NorthwindService {
    constructor(http: HttpClient) { super(http, 'Orders'); }

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 09 Mar 2021, 09:56 AM

Hello Archana,

The used HTML markup is valid, and all required properties are set:

Unfortunately, the provided StackBlitz does not point to an example.

Please check this article from our documentation that shows how to implement virtual scrolling with remote data:

I checked the demo and the pageChange event is triggered as expected.

Let me know in case I am missing something.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question