Kendo UI Grid View implementation using vue | pagination issue

1 Answer 112 Views
Grid Pager
Anil
Top achievements
Rank 1
Anil asked on 07 Dec 2022, 08:48 AM

We trying to implement a Kendo grid for my project and I was trying to add 'All' option in the pagination and used dataStateChange event to set the take value but getting event value as undefined.

Whenever we select "All" option from the dropdown, In dataStateChange method , I am getting selected value as "totalItemCount" instead of "All", but I can see both "totalItemCount" and "All" options in dropdown.

Example:

we have 1000 records as "totalItemCount" in a table, provided image below. So I am able to see all the records in the table but in dropdown we can see both 1000 and "All" option. We only need to see "All" not 1000.

We should not see "totalItemCount" in the dropdown(as well as selected option) and see only "All" as a selected option(as well as dropdown) when we select "All" option from dropdown.

Can someone help to solve this issue, please?

 


pageable() { return { buttonCount: 5, info: true, type: 'numeric', pageSizes: [10, 15, 20, 'All'], previousNext: true, pageSizeValue: this.pageSizeValue, }; }, dataStateChange: function (event) { this.loader = false; this.skip = event.data.skip; this.take = event.event.value === 'All' ? 1000 : event.page.take; this.pageSizeValue = 'All'; },



1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 09 Dec 2022, 11:30 AM

Hello, Anil.

Here is a StackBlitz example demonstrating how the targeted functionality can be implemented. In this project, to make the page size work correctly, we applied the following changes:

1. Add the pageSizeValue prop to the pageable computed property:

pageable() {
  return {
    buttonCount: 5,
    info: true,
    type: 'numeric',
    pageSizes: [10, 15, 20, 'All'],
    previousNext: true,
    pageSizeValue: this.pageSizeValue,
  };
}

2. In the dataStateChange method, the following, marked in yellow, logic is needed to dynamically update the pageSizeValue data property.

dataStateChange: function (event) {
  this.loader = true;
  setTimeout(() => {
    this.loader = false;
    this.skip = event.data.skip;
    this.take = isNaN(event.data.take) ? 1000 : event.data.take;
    if (isNaN(event.data.take)) {
      this.pageSizeValue = 'All';
    } else {
      this.pageSizeValue = this.take;
    }
  }, 300);
}

I hope the linked example and the above details will help you implement what you need in your application.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid Pager
Asked by
Anil
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or