How to cutomize pagination details

[Cyril Ovely]

Hi Team,

Please tell me how to customize the page detail to the following format. In current page details, we are showing page numbers in the page count (1 of 10 pages) message section. Instead, I want to display number of records (View 1-10 of 100).

As an example, suppose there are 100 records and 10 records are displayed per page. It will be like "View 1-10 of 100" on first page, on next page it will be like "View 11-20 of 100".

Expected Detail
Current details

Regards,
Cyril Ovely

[Vinitha Balasubramanian]

Hi Cyril,

Currently we are validating the reported scenario “How to customise pagination details” at our end. So we will update further details shortly. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

We have prepared a sample based on your requirement using dataBound and actionComplete event of Grid component. For initial rendering we get total records length and current view record length to show in the pager. Here is an example of how this can be implemented:

[App.vue]

 

dataBound(args) {

      var grid = this.$refs.grid.ej2Instances;

      var totalRecords = grid.getDataModule().dataManager.dataSource.json

        .length;                                                      

      var currentViewRecords = grid.getCurrentViewRecords().length;

      grid.element.querySelector(".e-pagecountmsg").innerHTML = "";

      grid.element.querySelector(".e-pagenomsg").innerHTML =

        "View 1 - " + currentViewRecords + " of " + totalRecords;        // to show the customized message

    },

On performing paging, we get total records length, current view record length, pageSize value using actionComplete event to achieve your requirement. Here is an example of how this can be implemented:

[App.vue]

actionComplete(args) {

      var grid = this.$refs.grid.ej2Instances;

      var totalRecords = grid.getDataModule().dataManager.dataSource.json

        .length;                                                                       // get the total record length

      var pageSize = grid.pageSettings.pageSize;          // pageSize of the grid

      if (args.requestType === "paging") {

        currentPage = args.currentPage;                        // get currentpage value for calculation

        previousPage = args.previousPage;                   // get previouspage value for calculation

        var firstValue = previousPage * pageSize + 1;  // calculation to show the first value of the pager

        var secondValue = previousPage * pageSize + args.rows.length;     // calculation to show the second value of the pager

        grid.element.querySelector(".e-pagecountmsg").innerHTML = "";

        grid.element.querySelector(".e-pagenomsg").innerHTML =

          "View " + firstValue + " - " + secondValue + " of " + totalRecords;        // to show the customized message

      }

    },

Sample : https://codesandbox.io/s/vue-template-forked-fh9erj?file=/src/App.vue

API : https://ej2.syncfusion.com/vue/documentation/api/grid/#databound

         https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete

[Cyril Ovely]

Hi Vinitha,

I tried applying the given solution but it didn't work for me, as in my case I've modified your code and placed it inside "dataBound" method and it's working fine for me. I'm sharing with you the code which I'm using to show custom pagination.

Please review it and let me know if any correction is required.



Regards,
Cryil Ovely

[Vinitha Balasubramanian]

To customize the pager message in your Syncfusion Vue Grid component, you can use the actionComplete event in combination with the dataBound event. This will allow you to display the current and previous pages, as well as the first and second values in the pager. Here is an example of how you can use these events to customize the pager message:

[App.vue]

actionComplete(args) {

      var grid = this.$refs.grid.ej2Instances;

      var totalRecords = grid.getDataModule().dataManager.dataSource.json

        .length;// get the total record length

      var pageSize = grid.pageSettings.pageSize;// pageSize of the grid

      if (args.requestType === "paging") {

        currentPage = args.currentPage;                        // get currentpage value for calculation

        previousPage = args.previousPage;// get previouspage value for calculation

        var firstValue = previousPage * pageSize + 1;  // calculation to show the first value of the pager

        var secondValue = previousPage * pageSize + args.rows.length;     // calculation to show the second value of the pager

        grid.element.querySelector(".e-pagecountmsg").innerHTML = "";

        grid.element.querySelector(".e-pagenomsg").innerHTML =

          "View " + firstValue + " - " + secondValue + " of " + totalRecords;        // to show the customized message

      }

    },

In this example, the actionComplete event is used to update the pager message whenever the grid is paged. The dataBound event is used to update the pager message whenever the grid is data bound. The updatePagerMessage method is used to calculate the first and second values to be displayed in the pager, and to update the pager message with these values and the total number of records.

Sample: https://codesandbox.io/s/vue-template-forked-fh9erj?file=/src/App.vue:1936-2344