Cannot trigger dataStateChange on scroll

Question

HelloI am using vue2 as a library in an ASP Core 2.1 MVC application. The problem that I am facing is, after loading the data initially, the grid does not load any more on scroll.  I am thinking the VirtualScroll component is not getting injected in the grid perhaps. I followed the below forum:https://www.syncfusion.com/forums/156293/grid-not-rendering-all-rowsMy code sample is attached as zip. Please let me know if you need any more details.Attachment: sample_4382e7d7.zip

Balaji Sekar · Accepted Answer

Hi Rafat,

Based on your query we have created a sample with custom databinding in the DataGrid. In this sample we have enabled the Virtualization feature with your requirement. At the initial Grid rendering please call your service in Vue mounted hook and please return the result like as “{result: […], count: …}” format to Grid. For grid actions such as paging, grouping, sorting, etc., the dataStateChange event is invoked

Please refer the below code example and sample for more information.

[App.Vue]

<ejs-grid

ref="grid"

:dataSource="data"

:height="200"

:enableVirtualization="true"

:dataStateChange="dataStateChange"

>

. . . .

</ejs-grid>

mounted() {

// Used vue mounted hook to provide dataSource to Grid and handled the initial paging

let state = { skip: 0, take: 12 };

this.dataStateChange(state); // call the dataStateChange function here

},

dataStateChange: function (state) {

console.log("dataStateChange event triggered....");

getOrders(state).then(gridData => { // get the service data

this.data = gridData;

}

);

},

[OrderService.ts]

const baseUrl = "https://services.odata.org/V4/Northwind/Northwind.svc";

// get

export function getOrders(state) {

const skipquery = state.skip > -1 ? `$skip=${state.skip}` : null;

let pageQuery = "";

const takeQuery = state.take > -1 ? `$top=${state.take}` : null;

if (skipquery) {

pageQuery = `${skipquery}&`;

}

if (takeQuery) {

pageQuery = `${pageQuery}${takeQuery}`;

}

return fetch(baseUrl + "/Orders"+"?"+pageQuery+"&$count=true")

.then(res => res.json())

.then(data => {

return {

result: data["value"],

count: parseInt(data["@odata.count"], 10)

};

});

}

Sample link: https://www.syncfusion.com/downloads/support/forum/164136/ze/Grid-CustomBinding-VirtualScroll-Vue-2045782496.zip

Note: We must need to provide data source to Grid like as “{result: […], count: …}” format to achieve this custom binding concept.

We have already discussed about this topic in our below help documentation. So please refer this documentation for more details,

Documentation links,

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

https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#handling-grid-actions

https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#perform-crud-operations

Please get back to us, if you need further assistance.

Regards,

Balaji Sekar

Balaji Sekar · Answer

Hi Rafat, 
 
Greetings from the Syncfusion support. 
 
We checked your query with provided the information and we found that you have injected the VirtualScroll module to grids instead of grid in the provide section of Vue it is cause of the problem so please inject Grid’s requires module to grid in the provide section. 
 
Please refer the below code example for more information. 
 




[sample.html] 
  provide: { 
      grids: [VirtualScroll],  // Please use grid in the provide section 
    }, 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar

Rafat Rashid · Answer

Hi again,Yeah well I did start with grid in the provide section as shown in the documentation. I tried grids too and many more but still doesnt trigger the dataStateChange. Would it be possible to give any example of virtualScrolling in non single file component?