Angular 2 - Grid - Virtual Scrolling

Angular 2 - Grid - Virtual Scrolling

Posted by: mail2 on 14 September 2017, 11:34 am EST

• 

  mail2

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:34 am EST

  Hello,

  we are currently testing the Angular2 Integration for a new product. We need sort of “virtual scrolling” in the Grid by loading next/prev records via WebAPI.

  Is that on the Agenda or already implemented ?

  Thanks and best regards
  
  Marc

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:34 am EST

  Hello,

  All scrolling in the FlexGrid is virtualized. Only the DOM elements needed to render the cells visible in the viewport are created (with a buffer for smooth scrolling of course). This is how the FlexGrid is designed and virtualization has been baked in from the start.

  There is no need to implement virtual scrolling explicitly in the FlexGrid control. Take a look at this sample to see how many rows we can display at once: http://demos.wijmo.com/5/angular2/explorer/explorer/#/grid/intro.

  Change the item count and notice that the performance of the grid is not affected. (The browser might take some time to generate 1,000,000 records, but the grid rendering is immediate.)

  Hope it helps. Please let us know in case you are referring to a different scenario or you would dtill like to lOad the additional records using WebAPI.

  Thanks,
  
  Manpreet Kaur

• 

  austinnichols

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:34 am EST

  Manpreet,

  I’m very interested in the WebAPI approach. We have a very large dataset and it’s not practical to move all of the records from the back-end to the front-end. It would be useful to have demo code showing server-side sorting, filtering and record paging using angular2 flexgrid.

  Michael

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:34 am EST

  Hello,

  Wijmo5 provides ODataCollectionView, BreezeCollectionView and ODataVirtualCollectionView to perform server side paging, filtering and grouping operations. The BreezeCollectionView demo sample even depicts how you can use WebAPI on the server end. Kindly refer to the following demo samples which depicts each of these classes:

  http://demos.wijmo.com/5/Angular/Breeze/Breeze/#/
  
  http://demos.wijmo.com/5/Angular/OData/OData/#/
  
  http://demos.wijmo.com/5/Angular/ODataExplorer/ODataExplorer/
  
  http://demos.wijmo.com/5/Angular/VirtualData/VirtualData/

  You may try exploring the above approaches to fulfll your requirement. Hope it helps. Please let us know in case you need any assistance further.

  Thanks,
  
  Manpreet Kaur

• 

  Gopala.Chintakindi

  • Post Options:
  • Link
    Copy

  Posted 3 April 2018, 11:53 am EST

  This is one of the thing I find hard with wijmo. You have nice demos with no explanations and code. Now we need to go and figure out…