Requirement In Pagination

[PH Harish]

Hi Team,

              I am using syncfusion Grid it is working fine but in pagination, I have some requirement need help from your side.

For your reference, I am attaching the sample code as well...

Attachment: Pagination_Requirement_36b04a95.zip

[Rajapandiyan Settu]

Hi Harish,  

  

Greetings from Syncfusionsupport.  

  

Based on your requirement, we have customized the Grid pager component as in the attached screenshot by using the dataBound event of Grid. Please find the below code example and sample for more information.  

  

dataBound:https://ej2.syncfusion.com/angular/documentation/api/grid#databound  

  

  

Index.html  

  

<style>  

    .e-pager .e-icon-prev::before,  

    .e-pager .e-icon-next::before {  

      content: '' !important;  

    }  

  

    .e-pager .e-currentitem,  

    .e-pager .e-currentitem:hover {  

      background: white;  

      color: blue;  

      opacity: 1;  

    }  

  

    .e-pagercontainer {  

      float: right;  

    }  

  

    .e-pager div.e-parentmsgbar {  

      float: none;  

      padding: 13px;  

      display: inherit;  

    }  

  

    .e-pagesizes {  

      float: left;  

      padding: 5px;  

    }  

  

    .e-pager .e-pagerdropdown {  

      margin-top: 0;  

      width: 60px;  

    }  

  

    .e-input-group,  

    .e-input-group.e-control-wrapper {  

      margin-bottom: 0;  

    }  

      

    span.e-input-group.e-control-wrapper.e-alldrop.e-ddl.e-lib.e-keyboard.e-valid-input {  

      border: none;  

    }  

  </style>  

  

  

  

App.component.ts  

  

dataBound(args) {  

// customize the pager component  

    (this.grid.element.querySelector(".e-gridpager .e-prev") as HTMLElement).innerText = "Previous";  

    (this.grid.element.querySelector(".e-gridpager .e-next") as HTMLElement).innerText = "Next";  

    (this.grid.element.querySelector(".e-gridpager .e-pagerconstant") as HTMLElement).style.display = "none";  

    (this.grid.element.querySelector(".e-gridpager .e-pagenomsg") as HTMLElement).innerText = "Entries\t " + " " + "Showing " + (((this.grid.pageSettings.currentPage - 1)  

 * this.grid.pageSettings.pageSize) + 1) + " to " + ((this.grid.pageSettings.currentPage) * this.grid.pageSettings.pageSize);  

    (this.grid.element.querySelector(".e-gridpager .e-pagecountmsg") as HTMLElement).innerText = " of " + this.grid.pageSettings.totalRecordsCount  

    if (this.grid.element.querySelector(".e-gridpager .show") == null) {  

      var div = document.createElement("div");  

      div.innerText = "Show";  

      div.classList.add('show');  

      this.grid.element.querySelector(".e-gridpager .e-pagesizes").insertBefore(div, this.grid.element.querySelector(".e-gridpager .e-pagerdropdown"));  

    }  

  }  

  

  

Sample: https://stackblitz.com/edit/angular-4ruere-3mqtho?file=app.component.ts  

  

Please let us know, if you need further assistance with this.  

  

Regards,  

Rajapandiyan S 

[PH Harish]

Hi Harish,  

  

Greetings from Syncfusionsupport.  

  

Based on your requirement, we have customized the Grid pager component as in the attached screenshot by using the dataBound event of Grid. Please find the below code example and sample for more information.  

  

dataBound:https://ej2.syncfusion.com/angular/documentation/api/grid#databound  

  

  

Index.html  

  

<style>  

    .e-pager .e-icon-prev::before,  

    .e-pager .e-icon-next::before {  

      content: '' !important;  

    }  

  

    .e-pager .e-currentitem,  

    .e-pager .e-currentitem:hover {  

      background: white;  

      color: blue;  

      opacity: 1;  

    }  

  

    .e-pagercontainer {  

      float: right;  

    }  

  

    .e-pager div.e-parentmsgbar {  

      float: none;  

      padding: 13px;  

      display: inherit;  

    }  

  

    .e-pagesizes {  

      float: left;  

      padding: 5px;  

    }  

  

    .e-pager .e-pagerdropdown {  

      margin-top: 0;  

      width: 60px;  

    }  

  

    .e-input-group,  

    .e-input-group.e-control-wrapper {  

      margin-bottom: 0;  

    }  

      

    span.e-input-group.e-control-wrapper.e-alldrop.e-ddl.e-lib.e-keyboard.e-valid-input {  

      border: none;  

    }  

  </style>  

  

  

  

App.component.ts  

  

dataBound(args) {  

// customize the pager component  

    (this.grid.element.querySelector(".e-gridpager .e-prev") as HTMLElement).innerText = "Previous";  

    (this.grid.element.querySelector(".e-gridpager .e-next") as HTMLElement).innerText = "Next";  

    (this.grid.element.querySelector(".e-gridpager .e-pagerconstant") as HTMLElement).style.display = "none";  

    (this.grid.element.querySelector(".e-gridpager .e-pagenomsg") as HTMLElement).innerText = "Entries\t " + " " + "Showing " + (((this.grid.pageSettings.currentPage - 1)  

 * this.grid.pageSettings.pageSize) + 1) + " to " + ((this.grid.pageSettings.currentPage) * this.grid.pageSettings.pageSize);  

    (this.grid.element.querySelector(".e-gridpager .e-pagecountmsg") as HTMLElement).innerText = " of " + this.grid.pageSettings.totalRecordsCount  

    if (this.grid.element.querySelector(".e-gridpager .show") == null) {  

      var div = document.createElement("div");  

      div.innerText = "Show";  

      div.classList.add('show');  

      this.grid.element.querySelector(".e-gridpager .e-pagesizes").insertBefore(div, this.grid.element.querySelector(".e-gridpager .e-pagerdropdown"));  

    }  

  }  

  

  

Sample: https://stackblitz.com/edit/angular-4ruere-3mqtho?file=app.component.ts  

  

Please let us know, if you need further assistance with this.  

  

Regards,  

Rajapandiyan S 

Hi Rajapandyan,

                          Your solution is working fine apart from the one requirement in the Dropdown list.

Description: When I am trying to sort in the dropdown it is coming like 5,10,12.....etc but I need like 50,100,150,200 only 

For your reference, I am attaching the file please look at it

Attachment: Dropdownlist_ee1fee1a.zip

[Rajapandiyan Settu]

Hi Harish,  

  

Thanks for your update. 

Query: When I am trying to sort in the dropdown it is coming like 5,10,12.....etc but I need like 50,100,150,200 only 

You can achieve your requirement by using pageSizes property. Here, you can bind an array of string values which will be shown in the pageSizes dropdown. Refer to the below code example and sample for more information. 

pageSizes: https://ej2.syncfusion.com/angular/documentation/api/grid/pageSettings/#pagesizes 

this.pageSettings = { pageSizes: ["All","50","100","150","200"], pageCount: 5, pageSize:50 }; 

Sample: https://stackblitz.com/edit/angular-4ruere-efqv8d?file=app.component.ts  

Please let us know, if you need further assistance with this.  

  

Regards,  

Rajapandiyan S 

[PH Harish]

Hi Rajapandiyan,

                            The solution is working fine. Thank you for providing the exact solution that I ask Good work and great feature ahead.

[Rajapandiyan Settu]

Hi Harish, 

We are glad that the provided solution is resolved your requirement. 

Please get back to us if you need further assistance with us. 

Regards, 

Rajapandiyan S