Reset flexgrid on sort (React)

Reset flexgrid on sort (React)

Posted by: igelfenbeyn on 15 January 2021, 6:59 am EST

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 15 January 2021, 6:59 am EST

  Hello,
  
  I have a grid that show top 10 rows of my dataset based on Col1 sorting. When the user click on Col2 i need the grid to recalculate and only top 10 rows based on Col2. How can it be done?

  Thank you

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 January 2021, 12:16 am EST

  Hi Igor,

  As per my understanding, you need to display the top 10 items only in the grid. I would suggest you use paging for this. You will need to set the pageSize of the CollectionView to 10 and the collection view will take care of resetting the grid after being sorted.
  
  Please refer to the sample link below for reference:

  https://stackblitz.com/edit/react-n5t1j6

  Regards,
  
  Ashwin

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 19 January 2021, 6:05 am EST

  Hello,
  
  thanks for providing a sample below. How can I identify if the user click on ascending or descending order? I want to reflect the sort direction in a label outside of the grid.

  https://stackblitz.com/edit/react-n5t1j6

  Thank you

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 January 2021, 6:11 pm EST

  You may use the sortedColumn event of the FlexGrid. This event fires whenever a column is sorted or unsorted. Please refer to the sample link below for a demonstration:

  https://stackblitz.com/edit/react-q1yahr

  ~regards