Is it possible using DataManager for server side filtering but store results in a vuex store?

Hello,

i am currently using the data manager for sever side filtering, sorting and paging.

I would like to store the result of those requests in a vuex store.

The reason is, that i have anoter component for editing an entrie that was selected in the grid and i don't want to refresh the whole grid after updating an entry in order to show the updated data in the grid.


2 Replies

SS Sascha Siebrecht July 30, 2021 07:21 PM UTC

Hopefully nobody worked on that, yet. I found a solution by myself. I just Added a dataStateChanged Method which uses axios to send the request to my api (with grid state in body) so the DataManagerRequst can do the work.


But there is still one problem i am facing. As i said i have another component that shows details for the selected items with the possibility to change their properties.

After updating an item i search it's index in the array (which the grid uses as datasource) and replace it with the updated item.

The changes dont get reflected in the grid so i added a watcher to refresh columns:


My problem now is, that the commented line will lead into an infinite loop of fetching data from the api and refreshing grid columns. (refreshGridColumns() triggers reload from api, which updates my store, which triggers my watcher, and so on).


Is there any way to make the grid rerender updated columns in order to show the correct data without reloading the whole grid from api?



SK Sujith Kumar Rajkumar Syncfusion Team August 2, 2021 12:13 PM UTC

Hi Sascha, 
 
Greetings from Syncfusion support. 
 
We are glad to hear that your initial query has been resolved. As for this query – “Is there any way to make the grid rerender updated columns in order to show the correct data without reloading the whole grid from api?”, we would like to let you know that when the refresh or refreshColumns method is called, the Grid will be refreshed and server request will automatically be sent(if remote data or custom binding approach is used). 
 
Since you have used custom binding approach(using dataStateChanged to fetch and update Grid data), it needs to call the dataStateChanged event on refresh in order to fetch the updated data from the server and then update the same in the Grid. This is its default behavior and it cannot be prevented. And since this method is getting invoked from the watcher, the case is getting executed in a continuous loop in your scenario. 
 
So for your case we suggest you to resolve the problem by using a global flag variable which can be enabled when making dynamic changes to the data array. Now when the watcher handler is triggered you can call the refreshColumns method only if the flag is enabled and then disable it inside the condition as demonstrated in the below code snippet, 
 
watch: { 
    media: { 
        handler() { 
            if (this.isChanged) { 
                this.isChanged = false; 
                this.$refs.Grid.refreshColumns(); 
            } 
        } 
    } 
} 
 
On using this approach, the event will only be triggered once when the condition is satisfied. 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon