Can we make pager no editable in wijmo grid

Can we make pager no editable in wijmo grid

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

• 

  sdayal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  dushyant.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 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