I am working on a demo for virtual scroll with kendo grid. I am using remote data(API call from service). When I drag and drop my scroll bar to bottom of the grid then last page data (Here pagesize = 50 so last 50 data) should be display. But this is not happening. I have total 337154 data in my database.
gridtest.component.html :
<kendo-grid [data]="gridData" [skip]="currentSkip" [pageSize]="pageSize" [scrollable]="'virtual'" [rowHeight]="35" (pageChange)="pageChange($event)" [height]="500">
<kendo-grid-column field="RowNumber" title="Row Number" width="80">
</kendo-grid-column>
<!-- class="hidden" [headerClass]="'k-hidden'"-->
<kendo-grid-column field="MaterialNum" title="PartNumber" width="90">
</kendo-grid-column>
<kendo-grid-column field="Description" title="Description" width="250">
</kendo-grid-column>
<kendo-grid-column field="Commodity" title="Commodity">
</kendo-grid-column>
<kendo-grid-column field="MaterialUOM" title="UOM" width="80">
</kendo-grid-column>
<kendo-grid-column field="QACheck" title="QACheck" width="80">
</kendo-grid-column>
<kendo-grid-column field="PreferredVendor" title="PreferredVendor" width="80">
</kendo-grid-column>
<kendo-grid-column field="Mark" title="Mark" width="80">
</kendo-grid-column>
</kendo-grid>
<div class="componentLoader" [ngClass]="IsBusy?'show':'hide'">
<img class="componentloader" src="images/loading.gif" />
</div>
gridtest.component.ts :
import { FrameworkService } from "../../services/FrameworkService";
import { Component, ElementRef, ViewEncapsulation, Input, NgZone, HostListener } from '@angular/core';
import { Shared, SharedModel } from "../../common/Shared/Shared";
import { PageDataOutputModel } from '../../models/PageDataOutputModel'
import {
GridDataResult,
PageChangeEvent
} from '@progress/kendo-angular-grid';
import 'rxjs/add/operator/map';
import { ApplicationService } from "../../services/ApplicationService";
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/debounceTime';
@Component({
selector: 'gridTest',
templateUrl: './gridTest.component.html',
})
export class GridTestComponent extends ApplicationService {
public currentScrollTop: number = 0;
@Input() contentHeight: number = 0;
public extraHeight: number = 10;
@Input() contentWidth: number = 0;
public OrderedData: any;
public sharedData: SharedModel;
public contextData: any;
public gridData: GridDataResult;
public data: any;
public currentPageNo: any;
public totalRowCount : any = 0;
public pageSize = 50;
public IsBusy: boolean = false;
@Input() pageDataOutputDetail: PageDataOutputModel = new PageDataOutputModel();
public currentSkip = 0;
public previousSkip : any;
items: any;
constructor(public sharedResource: Shared, private frameworkService: FrameworkService, private el: ElementRef, private zone: NgZone) {
super();
if (this.ApplicationManager != null) {
this.sharedData = this.ApplicationManager.Framework.sharedResource.SharedComponent;
}
else {
this.sharedData = sharedResource.SharedComponent;
}
this.getItemList();
}
ngUnsubscribe: Subject<boolean> = new Subject<boolean>();
ngAfterViewInit() {
}
loadItems() {
this.gridData = {
data: this.data,
total: 337154
}
console.log(this.data.length);
this.IsBusy = false;
}
getItemList() {
this.IsBusy = true;
if (this.currentSkip == 0) {
this.data = [];
this.pageSize = 100;
this.contextData = {
'PageNum': 1,
'ScrollDirection': 0
}
}
else {
this.pageSize = 50;
}
this.ItemDataSource();
}
public ItemDataSource() {
// this.data = [];
this.IsBusy = true;
this.frameworkService.MaterialList(this.contextData).takeUntil(this.ngUnsubscribe).subscribe((data: any) => {
this.items = data;
for (let i = 0; i < this.items.MaterialList.length; i++) {
let passData: any = {};
passData.PartNumber = this.items.MaterialList[i].PartNumber;
passData.MaterialNum = this.items.MaterialList[i].MaterialNum;
passData.Description = this.items.MaterialList[i].MaterialDescription;
passData.Commodity = this.items.MaterialList[i].Commodity;
passData.UOM = this.items.MaterialList[i].UOM;
passData.QACheck = this.items.MaterialList[i].QACheck;
passData.PreferredVendor = this.items.MaterialList[i].PreferredVendor;
passData.Mark = this.items.MaterialList[i].Mark;
passData.RowNumber = this.items.MaterialList[i].RowNumber;
this.data.push(passData);
}
this.previousSkip = this.currentSkip;
this.loadItems();
}, (err) => {
console.log(err);
});
}
public pageChange(event: PageChangeEvent): void {
//this.IsBusy = true;
this.currentSkip = event.skip;
if (this.currentSkip > this.previousSkip || this.currentSkip == 0) {
this.contextData.PageNum = this.pageDataOutputDetail.PageNum;
this.currentPageNo = this.pageDataOutputDetail.PageNum;
this.contextData.ScrollDirection = 1;
this.totalRowCount = (this.pageDataOutputDetail != null && this.pageDataOutputDetail.RecordCount != null) ? this.pageDataOutputDetail.RecordCount : this.OrderedData.length;
}
else if (this.currentSkip < this.previousSkip && this.contextData.PageNum > 0) {
this.contextData.PageNum = this.pageDataOutputDetail.PageNum;
this.contextData.ScrollDirection = -1;
this.currentPageNo = this.pageDataOutputDetail.PageNum;
//this.totalRowCount = (this.pageDataOutputDetail != null && this.pageDataOutputDetail.RecordCount != null) ? this.pageDataOutputDetail.RecordCount : this.OrderedData.length;
}
console.log(this.contextData);
this.pageSize = 50;
if (!this.IsBusy) {
this.ItemDataSource();
this.data = this.data.slice(this.contextData.PageNum < 3 ? 0 : (this.contextData.PageNum - 2) * this.pageSize, (this.contextData.PageNum * this.pageSize));
}
//end
}
}
Now as per this link (kendo grid virtual scroll remote data with jQuery) pagechange event will automatically gives the pagenumber or position whether you are at bottom or top. So I can not getting what is wrong with this code.
Thanks in advance.
