Kendo grid infinite or endless scrolling for angular

[rk]

  REQUIREMENT:

  I have a Kendo grid which displays tabular data. Initially the grid would fetch certain number of rows and upon reaching scroll end, it should make a http call      to get more rows appending to the existing list. Earlier achieved this using Kendo ui jquery.

  SCROLL: 

  Am not sure if this is a native scroll event to Kendo grid for angular. So am attaching a scroll event myself to DOM. When scroll reaches end, I make a call ,

  append more data and pass griddata to ui.

  WITH VIRTUAL SCROLL:

  From what I understand, whole data is retrieved before hand and using skip, pagenumber, we display what we need. What I need is more of an endless scroll    which appends to previous data.

  CODE:

  ngAfterViewInit() {     // attaches scroll event
     let scrolldiv = document.getElementsByClassName("k-grid-content")[0];
     if (scrolldiv) {
       scrolldiv.addEventListener("scroll", this.addMoreData.bind(this));}

     }

    addMoreData(event) {      // adds more data and passed grid data.
       let scrollAdjustment = 10;
        if (event.target.scrollTop != 0 && event.target.clientHeight + event.target.scrollTop + scrollAdjustment >= event.target.scrollHeight) {

        let moreRows = this.getMoreRows();
        this.gridView = {
          data: moreRows,
          total: moreRows.length
       }
    } }

   kendo template::

   <kendo-grid [data]="gridView" class="customgrid" >

       <div *ngFor="let col of totalColumns; ">
          <kendo-grid-column field="{{col.label}}" title="{{col.label}}" width="120"></kendo-grid-column>

     </div>

   <kendo-grid>

 1.   Is there a better way in Kendo UI Angualr to achieve this. The event I attach is defined only if there is a scrollable div inside kendo grid (which is only if               there are enough columns to bring a scrollbar)

 2. In case of Ng for, dynamically repeating , may I know how to access the data passed to <kendo-grid [data] > from ng for loop. Right now in NGFOR am              accessing  field values using a different variable (not [data]="gridView")

 

 

 

[Dimiter Topalov]

Hi RK,

The built-in Grid virtual scrolling functionality relies on emitting the pageChange event when a new "page" of data should be loaded. In the virtualization online demo, available on our site, the whole data set is created and available on the client for the purposes of the demo, but in the pageChange (or dataStateChange) event handler you can issue requests to a custom data service, that will return only the items that need to be displayed, depending on the position of the scroll handle.

You can find an example of paging with remote data in the following demo:

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/data-binding/

The same principle applies to virtual scrolling scenarios, but the pageChange (and dataStateChange) events are emitted when the scrollbar reaches certain points, calculated using the rowHeight and pageSize properties, as opposed to when the user clicks on a certain page in the Grid pager. You can also debounce pageChange events so that the remote requests are not performed too frequently (if needed):

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-debouncing-pagechange-events

Gradually accumulating and rendering all retrieved data on the client is not supported out-of-the-box (and we actually do not recommend it) as after a certain threshold of rows that will need to be rendered is reached, performance issues are likely to appear.

Please inspect the Virtual scrolling functionality and more specifically - using it along with a data service to retrieve only the portion/page of the data that will be rendered, and let us know whether this solution will be applicable to your scenario.

Regards,
Dimiter Topalov
Progress Telerik