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

[archana]

-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 https://stackblitz.com/run/?file=app%2Fapp.component.ts here even on owheight changes, event get trigger/fired. Please suggest changes that require to virtual scroll work as expected. 

 

user_Kendo.component.ts

 

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

@Component({
    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: `
      <kendo-grid
          [data]="query | async"
          [loading]="loading"
          [skip]="state.skip"
          [pageSize]="state.take"
          scrollable="virtual"
          [rowHeight]="36"
          [height]="450"    
          (pageChange)="pageChange($event)">

        <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>
      </kendo-grid>
    `
})
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 {
        this.stateChange.next(state);
    }
}

user_kendo.service.ts

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';

    constructor(
        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)
            .pipe(
                map((response:any) => (<GridDataResult>{
                    data: response.result.items,
                    total: parseInt(response.result.totalCount, 10)
                }))
            );
    }

}

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

[Martin Bechev]

Hello Archana,

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

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started

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:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-virtualization-with-remote-data

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

Let me know in case I am missing something.

Regards,
Martin
Progress Telerik