Unplanned
Last Updated: 01 Apr 2022 08:54 by ADMIN
Daniel
Created on: 01 Apr 2022 08:34
Category: Grid
Type: Feature Request
3
Native Grid pager refresh button

In my project, I always use remote data because the data comes from a backend that aggregates data from several sources in the company and because I want to sort, filter, etc on the server to be able to do it on the entire dataset (and I cannot do it in the frontend because it's a lot of data).

In the Wrapper Grid, we can add a "Refresh" button to the pager of the component using the pageable-refresh property. 

Such property is not available in the Native Grid. As the Native Grid doesn't use the DataSource component, I can assume that the Refresh button cannot be fully functional out of the box but still we could be able to pass a method that will be triggered once the button is clicked. Then through this method, we can make an API call and update the data.

1 comment
ADMIN
Petar
Posted on: 01 Apr 2022 08:54

Hi Daniel,

I've just sent you a private ticket with a workaround that adds the requested Refresh button in the current implementation of the Grid. Below I will share the suggested approach again, just in case someone from the community wants to achieve the same functionality as yours. 

To add a refresh button we can run the following in the mounted hook of the component where we use the Grid.

mounted() {
  const pagerInfo = document.getElementsByClassName('k-pager-info')[0];
  let refresh = document.createElement('div');
  refresh.style.cssText = 'order: 10';
  refresh.innerHTML =
    '<a href="#" class="k-pager-refresh k-link" title="Refresh" aria-label="Refresh"><span class="k-icon k-i-reload"></span></a>';

  refresh.addEventListener(
    'click',
    function () {
      this.onRefresh();
    }.bind(this)
  );
  pagerInfo.before(refresh);
}

With the above, we can have the following onRefresh method:

onRefresh() {
  this.getData();
}

Here is an example demonstrating the usage of the above code. The current implementation refreshes the data by fetching it again from the server. What we can do in the onRefresh method, is to make a server call, based on the filters, sorting, etc. applied to your data, and receive the required data.

I hope the above details and examplewill help someone implement the discussed scenario before the current feature request is implemented.

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.