Unable to enter two digit in page count

Unable to enter two digit in page count

Posted by: sdayal on 3 December 2023, 7:50 pm EST

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 3 December 2023, 7:50 pm EST

  Hi Wijmo Team,

  I am unable to enter two digit number in page count (wanted to navigate to particular page)

  https://stackblitz.com/edit/angular-17zaxp?file=src%2Fapp%2Fapp.component.ts

  Thanks

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 4 December 2023, 5:16 pm EST

  Hi,

  This is happening because the input event is handled to control the pagination. Please handle the “change” event instead of “input” event in the createEditablePaging() method. Please refer to the following code snippet:

      this.currentPageNo.addEventListener('change', (e: any) => {
        if (!isNaN(e.target.valueAsNumber) && e.target.valueAsNumber > -1) {
          grid.collectionView.moveToPage(e.target.valueAsNumber - 1);
        }
      });

  Also, please update the type of the input to “number” from “text” to use the valueAsNumber property on the event target element. Please refer to the below code snippet:

      this.currentPageNo = wjcCore.createElement(
        '<input type="number" class="currentPageNo">',
        pager._txtCurr
      );
      this.currentPageNo.value = grid.collectionView.pageIndex + 1;
      let lastPageNo = wjcCore.createElement(
        '<span class="lastPageNo"></span>',
        pager._txtCurr
      );

  Please note that since the change event is handled so the page will be changed only when the change event is fired for the corresponding input element. That is, the page will be changed when “Enter” is pressed or when the input loses the focus after entering a new page value.

  Please refer to the modified sample for reference: https://stackblitz.com/edit/angular-j89avd

  Regards