Can we make pager no editable in wijmo grid

Posted by: sdayal on 6 October 2021, 10:11 pm EST

  • Posted 6 October 2021, 10:11 pm EST

    Hi Wijmo team,

    https://stackblitz.com/edit/angular-dbahg1?file=src/app/app.component.ts

    Can we make pager no editable(if I change the no then it should change the page) in wijmo grid? and How?

    Thanks
  • Marked as Answer

    Replied 7 October 2021, 4:22 pm EST

    Hello,

    There isn't any inbuilt feature for making a pager editable, however, you can customize it to take input for the current page index. Please refer to the sample link below demonstrating the same:

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

    In the sample above, I have appended an input element to the pager to take the current page index and updated that index by handling input events into the collectionView. Also, make sure to update the index on pageChanged of the collectionView to show the current page index.

    Let us know if that's works for you.

    Regards
  • Replied 18 October 2021, 10:17 pm EST

    Hi,

    As we bring the data dynamically this 'initializedPager' method does not provide us the pagecount or source collection value.

    Can we use some other event in this ?

    Thanks
  • Replied 19 October 2021, 10:10 pm EST

    Hello,

    I have created a function(createEditablePaging) to make the pager editable, you can use this function to create the editable paging navigator, you can use this function to dynamically make the pager editable. Please refer to the sample link below for reference:

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

    In the above sample, I have called the function after the view gets created. Let us know if thats works for you.

    Regards
  • Replied 25 October 2021, 10:40 pm EST

    Hi Wijmo Team,

    1) Try to enter two or three digit number in input box, its not getting captured in below code:

    this.currentPageNo.addEventListener('input', (e: any) => {
    console.log('e.data', e.data);
    if (e.data != null) {
    grid.collectionView.moveToPage(parseInt(e.data) - 1);
    }
    });

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

    If I enter 22 or 11 then e.data only take 2 or 1 instead of 22 or 11. Can you please help and

    2) How can we restrict it to only Number values as I am able to add text values in this input box.

    Thanks
  • Replied 26 October 2021, 6:02 pm EST

    Hello,

    1. Sorry for the misunderstanding, I have updated the sample link below to work with more than one digit pageSize:

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

    In the sample link above, I have handle the keyup event instead of input and updated the pageIndex using entered value in the inputElement.

    2. You need to set the type attribute of the InputElement to number like type="number" to only type numbers in the input field.

    Regards
  • Replied 28 October 2021, 11:21 pm EST

    Hi,

    Thanks for response. The is one more thing how can we update the pager size count on filter.
  • Replied 1 November 2021, 9:01 pm EST

    Hello,

    To update the pager size count on the filter, we may handle the filterApplied event of FlexGrid Filter which occurs once the filter is applied, and may update the page count accordingly.

    For more information on the above event, please refer to the below link:
    https://www.grapecity.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html#filterapplied

    Please refer to the updated sample below.
    https://stackblitz.com/edit/angular-28xd4d?file=src%2Fapp%2Fapp.component.ts

    Regards
    Dushyant Sharma
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels