Using syncfusion grid with InfiniteScroll module

[John Killcommons]

Hello.

We using syncfusion grid with an infinite scroll module.

This allows us to load multiple chunks of data and display it in the grid without refresh.

Now we need to extend grid with the next operations.

1. On some system events we need to append a record to begin of grid. This means that we have a row data object and need somehow a new record to appear in grid table using programming api.

2. On some system events we need to update a specific row (defined by its id) inside the grid. This means that this record already loaded and re-render in grid table, and we want to perform its update.

Let me know how to achieve these goals using InfiniteScroll mode.

If its not doable using InfiniteScroll mode let me know how to do it in paginated mode.

[Rajapandi Ravi]

Hi John, 

Greetings from syncfusion support 

The infinite scrolling works on basis of the lazy-loading concept and only loads the next set of data when it reaches the end of the scrollbar. This feature can be enabled by setting the enableInfiniteScrolling property to true.  

 

We have analyzed your query and we could see that you like to append a records to beginning of the Grid. While adding a new records to the datasource the Grid will get refresh automatically. It was the default behavior of our Grid. Before start providing solution on your query we need more information for our clarification, Please share the below details that would be helpful for us to provide better solution. 

1)         Please confirm you are using local or remote data in your application. 

2)         Please explain your exact requirement scenario with detailed description and share us at what scenario you like to add a records in Grid datasource. 

3)         And in your query you have mentioned that “Need to update a specific row”. Please confirm you like to update a specific row without Grid refresh. 

Regards, 

Rajapandi R

[John Killcommons]

Thank you.

1)         Please confirm you are using local or remote data in your application. 

I using remote data in the application. 

2)         Please explain your exact requirement scenario with a detailed description and share us at what scenario you like to add records in Grid datasource. 

Let me explain the scenario.

First of all user recive data inside the grid. 

After some time other users in the system could update this records or add new records.

So we are receiving updates for such records and info that new records added through websocket.

3)         And in your query you have mentioned that “Need to update a specific row”. Please confirm you like to update a specific row without Grid refresh. 

The idea is to update already appeared in grid records, and prepend any newly create records on the top of grid WITHOUT refreshing the grid.

[Rajapandi Ravi]

Hi John, 

Thanks for the update 

In your query you have mentioned that “system could update this records or add new records.”. We need more information for our clarification. So please share us the code example we would like to see how you are adding a new records to the Grid.  

Regards, 

Rajapandi R 

[John Killcommons]

When we said, that system could update these records or add new records, we meant that there exists other pages where grid is not involved which provide crud operations for this model. We meant the system is sort of real-time, so grid data could be changed. Our goal is to find a way to achieve updates for such records. I don't know if you need framework-specific PHP where these changes happen. If you asking about updates inside grid, then no we don't have any changes there, we only display data inside the grid.

[Rajapandi Ravi]

Hi John, 

Thanks for the update 

We have analyzed your query and we understand you are only use the Grid for display purpose alone and you like to reflect the changes which was done by you in your database. To reflect the changes in Grid, you need to call the Grid refresh() method in your changes success event. While calling this method, it will make a post and fetch your new changes/modified records and display to the Grid. Please refer the below API for your reference. 

API: https://ej2.syncfusion.com/vue/documentation/api/grid/#refresh 

Regards,
Rajapandi R