Kendo UI Grid View implementation using vue | pagination issue

[Anil]

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

[Petar]

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