Flexgrid with Infinite scroll

Flexgrid with Infinite scroll

Posted by: jmisquez on 10 August 2022, 3:22 am EST

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 10 August 2022, 3:22 am EST

  I’m trying to create a infinite scroll with server pagination and im want to know if there’s a way to implement this with JSON response because all the examples that i can find in the documentations is with oData.

  What i have is an endpoint that returns the total of the items and 100 results per page, i want to use a infinite scroll to show them when they reach the bottom of the current results.

  following one of the examples for the infinite scroll is just to add more data to the curren itemSource the issue is that if i do that the performance it’s pretty bad i took too long to concat the results when the table grows.

  im using Angular 12 with this project and a shared table component so im not able to do too much manipulations in the HTML without loosing more performance.

  so to concat the information im doing this

  
    ngOnChanges(changes: SimpleChanges) {
      if (changes && changes.data && changes.data.currentValue) {
        this.itemSource.push(...changes.data.currentValue);
        this.refreshTable();
      }
    }
  
  

  
    private refreshTable(): CellType.Cell | null {
      if (!this.flex.collectionView) return null;
      const view = this.flex.collectionView;
      const index = view?.currentPosition || 0;
      console.log(index);
      view.refresh();
      view.currentPosition = index;
      return view.currentItem;
    }
  
  

  let me know if you need more information.

  Thanks

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 11 August 2022, 3:34 am EST

  Hi,
  
  Please refer to the following demo sample for reference:
  
  https://www.grapecity.com/wijmo/demos/Grid/PagingScrolling/ScrollVirtualization/purejs

  Regards,
  
  Manish Gupta

• 

  jmisquez

  • Post Options:
  • Link
    Copy

  Posted 11 August 2022, 4:29 am EST

  I already try that one but it doesn’t work as expected because it takes too long to concat the results when the results grow, it takes around 15~20 seconds to concat when the results are more than 600, there’s no other way to handle a infinite scroll that only concat the itemsource?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 11 August 2022, 7:19 pm EST

  Hi
  
  Instead of concat please try using the push() method to push the item in the array. Please refer to the demo sample for reference. We tried to add 600 items in the demo sample and it works fine.

  scrollPositionChanged: function (s, e) {
              //
              // if we're close to the bottom, add 20 items
              if (s.viewRange.bottomRow >= s.rows.length - 1) {
                  let view = s.collectionView;
                  let index = view.currentPosition; // keep position in case the view is sorted
                  addData(data, 600);
                  view.refresh();
                  view.currentPosition = index;
              }
          }
  

  Regards,
  
  Manish Gupta