How to customize the pager component, Add new Textbox/Dropdown for the GO TO Page feature, Keeping all the existing features of Pager

Question

Hi Team,Thank you for the fabulous components. I am using Pager component with Grid component for my angular application. Everything working great as of now. I just  want to add one more input in the pager component. Using that input one can jump to specific page. Can you please guide me for adding that feature.  I tried this link https://ej2.syncfusion.com/angular/documentation/grid/paging/#template for custom template but i lost the default pagecount container. Please help me for the above fix.

Rajapandiyan Settu · Answer

Hi Vikas,Thanks for contacting Syncfusion support.Based on your requirement, you want to render Dropdown/ Textbox
in the Grid pager to navigate to the particular page. We considered your
requirement as custom sample and will update the further details on or before Sep
22nd, 2022.We appreciate your patience until then.Regards,Rajapandiyan S

Vikas Gunjeti · Answer

Hi Rajapandiyan,Thank you for your reply. We will wait for your further updates on this requirement.Thanks,Vikas

Joseph Christ Nithin Issack · Answer

Hi Vikas,  Thanks for your update.  We will provide the details as mentioned.Regards,Joseph I.

Joseph Christ Nithin Issack · Answer

Hi Vikas,  Greetings from Syncfusion support.  We are preparing a sample for achieving your
requirement, we will provide further details on or before 26th
September 2022, we appreciate your patience until then.Regards,Joseph I.

Vikas Gunjeti · Answer

Hi Joseph,Sure we will wait until then. Thanks for providing an update.Thanks,Vikas

Joseph Christ Nithin Issack · Answer

Hi Vikas,  Thanks for your update.  We will provide the details as mentioned.Regards,Joseph I.

Joseph Christ Nithin Issack · Answer

Hi Vikas,  Thanks for your patience.  We have prepared a sample to add a input
element in the pager model and navigate to the page based on the input value.  Please refer the below code example.

public dataBound(args) {
      if (
        this.grid.element.querySelector('.e-gridpager .custom_gotopage') == null
      ) {
        var div = document.createElement('div');
        div.classList.add('custom_gotopage');
        var input = document.createElement('input');
        input.className = 'css-class-name'; // set the CSS class
        input.style.width = '200px';
        var numericTextObj = new NumericTextBox();
        numericTextObj.value = 1;
        numericTextObj.format = '##';
        numericTextObj.min = 1;
        numericTextObj.max = this.grid.pagerModule.pagerObj.totalPages;
        numericTextObj.showSpinButton = false;
        numericTextObj.change = (args) => {
          this.grid.pagerModule.goToPage(args.value);
        };
        div.appendChild(input);
        numericTextObj.appendTo(input);
        this.grid.element
          .querySelector('.e-gridpager')
          .insertBefore(
            div,
            this.grid.element.querySelector('.e-gridpager .e-parentmsgbar')
          );
      }
    }

Sample: https://stackblitz.com/edit/angular-sxgue2-7jnpve?file=app.component.ts,app.component.html,index.htmlPlease get back to us
for further details.Regards,Joseph I.