I have some issue regarding the kendo UI Grid Pagination Customization part

[Sanjay]

what is actual behavior
Default kendo UI behavior is like we need to render all the grid data once to activate pagination functionality if pageSize <= actual records then and then the only pagination will active but if we got pageSize > actual records the pagination won't work.

what is expected behavior
I need to set pageSize = 50 and API return me 50 records with total records field so, for now, we can assume that API return total 50 records and it has fields to indicate total records which let's say 200 so pagination will set accordingly [ 200 (total) / 50 (pageSize) = 4 page ] and pagination will active also with the pageSize <= actual logic and we can call separate API call for next 50 records after we click on next button which is been created on total records.

constructor( private router:Router,private httpclient:HttpClient,private EncrDecr:EncrDecrServiceService) {

    this.GetUserList();

   }

    modeldata:any={

    UserName:'',

    UserEmail:'',

    IsActive:'',

    sortable:true,

    PageSize:this.pageSize,

    PageNumber:this.pageNumber,

    SortParam:this.sortColumn,

    sortType: this.sortType

   };

   GetUserList(){

     

    this.httpclient.post(this.baseUrl+'UserDetail/GetAllGridData',this.modeldata).subscribe(res=>{

      this.gridList = res;

      this.gridData=this.gridList['Result'];

      this.items= this.gridData;

    },(error)=>{

      const err= error.error;

    })

   }

  breadCumb(){

    this.router.navigate(['/Home']);

  }

  newUser(){

    this.router.navigate(['/ManageUser']);

  }

 

  pageChange(event: PageChangeEvent): void {

    this.skip = event.skip;

    this.loadItems();

  }

  loadItems(): void {

    this.gridData = {

      data: this.items.slice(this.skip, this.skip + this.pageSize),

      total: this.items.length,

    };

  }

  public sort: SortDescriptor[] = [

    {

      field: "UserName",

      dir: "asc",

    },

  ];

  public sortChange(sort: SortDescriptor[]): void {

    this.sort = sort;

    this.modeldata.sortType= sort[0].dir;

    this.modeldata.SortParam=sort[0].field;

    this.GetUserList();

    this.loadProducts();

  }

 

   loadProducts(): void {

    this.gridData = {

      data: orderBy(this.gridData, this.sort),

      total: this.gridData.length,

    };

  }

 

  ngOnInit(): void {

    this.gridData = this.loadItems();;

   

   

  }

 

[Nikolay]

Hi Sanjay,

I think what you need is paging on the server by enabling the serverPaging property. This way the Grid will load only the predefined pageSize and the total and when the user asks for a different page a new request will be performed to request another pageSize number of items. Please refer to the following official demo:

• https://demos.telerik.com/kendo-ui/grid/remote-data-binding

More information on Server Paging you can find i nthe following article: https://docs.telerik.com/kendo-ui/controls/data-management/grid/paging#paging-on-the-server

Regards,

Nikolay

 

[Sanjay]

Hi Nikolay , Thanks for giving reply but sorry for that as you give suggestion this will be work in java script a or jQuery . I want to in angular 10+. please see my code.

[Nikolay]

Hi Georgi,

I noticed my colleague Georgi has replied to the same question but for Kendo UI Grid for Angular. Please refer to the following:

• https://www.telerik.com/forums/i-have-some-issue-regarding-the-kendo-ui-grid-pagination-customization-part-1565961#5493202

As a side note, it is important to choose the correct product you are using so we have the correct full requirement and reply to you accordingly. Kendo UI for jQuery and Kendo UI for Angular are two separate libraries that have special dedicated teams working on each of them.

Kind regards,

Nikolay