Targetting a specific page in Angular Grid Pager

Question

Hello Syncfusion team,I tried to implement a way to jump to a specific page in Grids. If I did not overlook anything, this seems not to be a built-in feature, so I wanted to customize the grid pager and put an input field in there to accomplish this by calling the gridObj.goToPage(x)-method on the input value. I saw that one can customize the pager by setting the pageSettings.template, but I dont want to discard the standard pager template. Instead I somehow want to insert my input field into the current pager template. Is there a way to accomplish this? Or any built-in way to insert a specific page number?Thanks in regardJonas Czeslik

Pavithra Subramaniyam · Answer

Hi Jonas,Thanks for contacting Syncfusion supportYou can achieve your requirement by appending the input element into
the Grid pager when the “created” event is triggered. Please refer to the
below code example and sample link for more information.

created(e) {
    let flValInput = createElement('input', { className: 'flm-input' });
   
    this.grid.getPager().querySelector('.e-pagercontainer').appendChild(flValInput);
    flValInput.addEventListener('keydown',
      function (args) {
        if (args.keyCode == 13) {
          this.grid.goToPage(parseInt(args.target.value));
        }
      }.bind(this)
    );
  }

https://stackblitz.com/edit/angular-oyngqn?file=app.component.html,app.component.tsRegards,Pavithra S

Jonas Czeslik · Answer

Hi, I did not think about such a solution. That's obviously working. Thank you very much!Jonas C.

Pavithra Subramaniyam · Answer

Hi Jonas,We are glad to hear that the provided solution works!Please get back to us if you need further assistance on this.Regards,Pavithra S