Cancel adding new row

Question

Hello, I'm having trouble canceling the addition of a new line in the grid, when I get an error from the API.

I'm using actionBegin to call the method and make the async / await request, but when I get an error, even then the grid adds the data

How do I cancel the addition in case of an error?

Manivel Sellamuthu · Answer

Hi Ryan, 

Greetings from Syncfusion support. 

We have checked the provided code example and we could see that you are using your own service to update the data. 
To achieve your requirement we suggest you to use the custom binding feature of Grid. By using custom data binding you can bind data from an API call by providing your own custom queries(as required by your API) and handle all the Grid actions(Sort, Page, Filter, etc. ) with it. The Grid’s custom binding approach is explained below, 
 
For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering..,etc. 
 
The dataSourceChanged event will be triggered for updating the grid data. You can perform the save operation based on the event arguments and you need to call the endEdit method to indicate the completion of save operation and call the cancelEdit method if the server operation fails. 
 
More details on custom binding can be checked in the below help documentation link, 
 
Custom binding documentation: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#custom-binding 
 
Online demo sample: https://ej2.syncfusion.com/vue/demos/#/material/grid/custom-binding.html 
 
API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#datastatechange 
                  https://ej2.syncfusion.com/vue/documentation/api/grid/#datasourcechanged 

Please let us know if you need further assistance. 

Regards, 
Manivel

Ryan · Answer

Hello, even with the explanation you gave me, I was unable to reproduce the dataSourceChanged.

My project is defined as follows:

instantiated the grid in a separate component, and

I reuse this component, passing several props.

I followed the example you gave me, but the event is not triggered for me to call my CRUD methods from

Sujith Kumar Rajkumar · Answer

Hi Ryan, 
 
Based on the provided information we could understand that the problem you are facing is the Grid’s dataSourceChanged event is not triggered on performing the CRUD action. But in the shared code snippet, we could see that you have not defined this event in the Grid definition. So please ensure to define this event in the Grid and we have also explained this event’s action below for your understanding, 
 
On performing CRUD action in the Grid, the action details will be returned in the dataSourceChanged event as shown in the below image, 
 
  
 
So in this event you can update the details in your server and on success of this action you need to call the state’s(The dataSourceChanged event argument) endEdit method in order to update the changes in the Grid(This will trigger the dataStateChange event which will fetch the updated data from the server). 
 
This is demonstrated in the below code snippet, 
 




// Grid’s dataStateChange event handler 
dataSourceChanged: function (state) { 
    if (state.action === 'add') { 
        addOrder(state.data).then(() => state.endEdit()); 
    } else if (state.action === 'edit') { 
        updateOrder(state.data).then(() => { state.endEdit() }); 
    } else if (state.requestType === 'delete') { 
        deleteOrder(state.data[0].OrderID).then(() => state.endEdit()); 
    } 
} 
 
We have prepared a sample based on this with local server(to fetch data) for your reference. Please find it below, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/164141/ze/GridCustomDataBinding-298696668 
 
Note: Before launching the above application, the express server needs to be started using the ‘node server.js’ command from the application’s root folder and then the Vue application can be launched using ‘npm run dev’ command. These actions need to be performed after installing the node modules. 
 
More details on this can be checked in the below help documentation link, 
 
Custom binding: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#perform-crud-operations 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Ryan · Answer

I can't understand why the dataSourceChanged event is not triggered by the gridAttachment: Desktop_796f2702.zip

Sujith Kumar Rajkumar · Answer

Hi Ryan, 
 
We checked the reported problem with the shared code snippet but still could not reproduce it from our end. We suspect that this problem might be occurring due to duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This could be invoking different package version files causing the reported problem. So please follow the steps provided below to remove the duplicate packages(if any),   
 
1.       Delete package.lock.json file from your application.  
2.       Remove the @syncfusion  package folder from the node_modules.  
3.       Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file. 
4.       Then install the new packages.  
 
Once installed the new packages please check if problem is resolved. If problem still persists then please share the following information to validate further on this, 
 

Please confirm us if you have set the Grid’s dataSource as an object of result and count properties.
Please confirm us the if the other events defined(dataStateChange, commandClick) in your application Grid are triggered properly.
Are any console errors thrown? If so please share it.
If possible share us a simple sample to replicate the problem or try reproducing it in the previously shared sample.
 
Regards, 
Sujith R

Ryan · Answer

Hello Syncfusion, it's me again.I did what he recommended to me, in addition to creating a new project and implementing what he gave me as an example, I was not successful!I created an example that I will share where I expose my problem, using a local date.As I already reported my problem is to catch the error of a CRUD and thus interrupt the addition of the line in the grid.As a detail, all my HTTP functions, I use Axios to make requests, and all of my functions are Async / Await.I would like a solution to this errorExemple

Sujith Kumar Rajkumar · Answer

Hi Ryan, 

We checked the reported problem(dataSourceChanged event not triggered) in the shared sample and it was occurring because the JSON data was directly set to the Grid’s dataSource. On doing this, the Grid will consider it as local data and the custom binding events will not be triggered for this case. So as mentioned in our previous update, for using custom binding the response data needs to be bound as an object of result and count to the Grid’s dataSource property and this can also be checked in the below documentation link for reference, 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/?#custom-binding 

We have modified the shared sample based on this for your reference. Please find it below, 

Sample: https://codesandbox.io/s/error-datastatechange-and-datasourcechanged-forked-4h061?file=/src/App.vue 

Note: In the above sample we have bound the initial Grid data in the Grid’s load event using a time out function in order for the Grid to be properly rendered before the data is dynamically updated. 

Let us know if you have any concerns. 

Regards, 
Sujith R

Ryan · Answer

The dataSourceChanged and dataStateChange worked perfectly.

However, in the treatment of a possible error that happens in the create method, the grid displays a spinner that does not disappear, this should not happen, no line was inserted in the grid.

I thought ActionFailure was necessary, but I couldn't do it.

In case,

my primary error arises, which is to interrupt the save action in the event of an error

Check the same example, and you will see that after the action "save" the spinner appears and does not come out

Error dataStateChange and dataSourceChanged (forked) - CodeSandbox

Sujith Kumar Rajkumar · Answer

Hi Ryan, 
 
With custom binding, on adding a new data to the Grid, the dataSourceChanged event will be triggered with the newly added data which can be updated in your custom service and on success the state’s endEdit method needs to be called. After this the dataStateChange event will be triggered where the Grid expects the updated data(from custom service) to be fetched and assigned to the Grid’s data source. Since this action was not performed the spinner was continuously shown in your case. So you can resolve this by setting the updated data to the Grid when the dataStateChange event is triggered for this case. 
 
We have modified the shared sample based on this for your reference. Please find it below, 
 
Sample: https://codesandbox.io/s/error-datastatechange-and-datasourcechanged-forked-sulx8?file=/src/App.vue 
 
Note: This needs to be performed for all the CRUD actions when custom binding is used in the Grid. 
 
Regards, 
Sujith R

Ryan · Answer

I understand, so it means that if I get an error on the part of the API, should I use closeEdit () or cancelEdit ()?

And if I click the cancel button nothing will happen to the grid

as in the image below, you hear an error, the spinner has already started to run, as I stop this spinner without updating the dataSource, since no data was inserted due to the error.

Sujith Kumar Rajkumar · Answer

Hi Ryan, 
 
Based on the provided information we could understand that your query is on how to cancel the edit when you get error from your data API service. You can achieve this by calling the dataSourceChanged event arguments cancelEdit method if the add request fails and then hide the spinner using the Grid’s hideSpinner method as demonstrated in the below code snippet, 
 




// Grid’s dataSourceChanged event handler 
dataSourceChanged(state) { 
    if (state.action === "add") { 
        alert("Add"); 
        // The add action is cancelled and the Grid spinner is hidden 
        state.cancelEdit(); 
        this.$refs.grid.ej2Instances.hideSpinner(); 
    } 
} 
 
On using the above approach, the Grid edit will be cancelled but the edit dialog will not be closed. So if you need to close the edit dialog also, then in addition to the above please call the Grid’s closeEdit method as demonstrated in the below code snippet, 
 




// Grid’s dataSourceChanged event handler 
dataSourceChanged(state) { 
    if (state.action === "add") { 
        alert("Add"); 
        // The add action is cancelled, edit dialog is closed and the Grid spinner is hidden 
        state.cancelEdit(); 
        this.$refs.grid.ej2Instances.hideSpinner(); 
        this.$refs.grid.ej2Instances.closeEdit(); 
    } 
} 
 
We have modified the previously shared sample based on this for your reference. You can find it below, 
 
Sample: https://codesandbox.io/s/error-datastatechange-and-datasourcechanged-forked-2b7lg?file=/src/App.vue 
 
Note: Since local data is used in the above sample, we have cancelled the add action by default in the dataSourceChanged event for demonstrating this case to you. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Ryan · Answer

Manivel Sellamuthu and Sujith Kumar Rajkumar.Thank you very much for your patience and competence in solving all my doubts. great professionals, keep it up!

Sujith Kumar Rajkumar · Answer

Hi Ryan, 

You’re welcome and thanks for the appreciation. 

Regards, 
Sujith R