Use pagination with ajax scrolling in Data Grid

[Erwin]

Hi there, I'm trying out some of the data grid features such as infinite scrolling. So I've created a sample in which the first load works fine, it loads the first 20 items correctly. But is there anyway to have an event that triggers once the scroll reaches the bottom?

I could use the actionBegin event based on this documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin. But it only triggers if I have more than 20 items initially. What I'm trying to achieve is to load the items on demand every time the scroll reaches the bottom. Can please anyone help me?

Sample link: https://drive.google.com/file/d/1f99S50FwPwSYNzTrPPoOz99nuxAb0Txj/view?usp=sharing

The sample I've made is under views > SyncFusion-Grid-Ajax.vue

[Pavithra Subramaniyam]

Hi Erwin, 

Thanks for contacting Syncfusion support. 

In your sample we could see that you are using custom data binding for Grid component, but you set the records directly to the Grid dataSource which is the cause of the issue. When you bind data using the custom binding concept you need to return the data in the form of result and count. Please refer to the below code example for overcome the reported issue. 

<script>  

export default { 

  name: "App", 

  data() { 

    return { 

      data: {}, 

      .  .  . 

    } 

  }, 

  methods:{ 

     

    dataStateChange: function (state) { 

      var self = this; 

      var param = { 

          includes: ['discount', 'selected_variant', 'size'], 

          page: (state.skip + 1), 

          pageSize: state.take, 

          sort: 'title' 

      }; 

      return $.ajax({ 

          url: https://shoeswaretest.isellershop.com/services/Liquid/Products, 

          type: "POST", 

          data: param 

      }).done(function(r){ 

        .  .  . 

        // we consider r.size may be the total records count 

        self.data = {result:r.Data, count: r.size }; 

      }); 

    }, 

  } 

} 

 

</script> 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#custom-binding 

Regards, 

Pavithra S 

[Erwin]

Hi Pavithra,

Thank you so much for the help. It works fine now. Also I'm trying the Cache Mode for Infinite scrolling, but I can't see the difference when I enable or disable it. The data becomes empty after I redirect to another page, e.g. open /sf-grid-ajax (data is loaded here), then open /others, then go back to /sf-grid-ajax (data grid is empty and need to hit the ajax again)

Can I know what is expected when the cache mode is enabled?

=======

One more thing, I'm also trying the VirtualScroll feature, I tried adding :enableVirtualization=true and import the VirtualScroll as well as adding it in the provide section. It shows error on my end once the scroll reaches the end. I've updated the sample for you to look at if you don't mind.

Sample link: https://drive.google.com/file/d/16SoXdhS5IwKlaok1podmhxSDBgwOkFAC/view?usp=sharing

Regards,

Erwin

[Pavithra Subramaniyam]

Hi Erwin, 

Query#1: Can I know what is expected when the cache mode is enabled? 

In Infinite Scrolling , the Cache mode is used to store the already loaded rows object in the Grid instance which can be reused for rendering the same row elements in the DOM while scrolling. This is not for persist the records while routing. The row objects is cached only for reuse while revisit the same Grid page(ie  Grid page that contains set of records mentioned in pageSettings.pageSize not component page routing) 

https://ej2.syncfusion.com/vue/documentation/grid/infinite-scroll/#cache-mode 

Query#2: One more thing, I'm also trying the VirtualScroll feature, I tried adding :enableVirtualization=true and import the VirtualScroll as well as adding it in the provide section. It shows error on my end once the scroll reaches the end 

In your sample we could see that you are trying to add virtualization, infinite scroll and paging in same Grid which is not feasible. You can use either Virtualization or Infinite Scroll or Pagination in a Grid component. For enabling the Row Virtualization, please refer to the below documentation and demo link. 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/virtual/#row-virtualization 

Demo                  : https://ej2.syncfusion.com/vue/demos/#/material/grid/virtual-scrolling.html 

Regards, 

Pavithra  

[Erwin]

Hi Pavithra,

Thank you for the explanation. I think that's all for now. Have a great day!

Regards,

Erwin

[Pavithra Subramaniyam]

Hi Erwin, 

 

You are most welcome.  

 

Please contact us if you have any other queries. We are happy to assist you as always. Have a Great Day! 

 

Regards, 

Pavithra S