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

0 Answers 18 Views
Grid
Sanjay
Top achievements
Rank 1
Sanjay asked on 22 Apr 2022, 07:42 AM

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
Telerik team
commented on 27 Apr 2022, 06:41 AM

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:

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
Top achievements
Rank 1
commented on 20 May 2022, 06:26 AM

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
Telerik team
commented on 24 May 2022, 12:09 PM

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:

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

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Sanjay
Top achievements
Rank 1
Share this question
or