Server side Validation in actionBegin or can i do it in DataSourceChanged

Question

I am following your example and extending upon it like it is herehttps://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#perform-crud-operations only difference is I am using axios instead your Ajax for making requests and I have managed to do everything except server side validation as i can't seem to figure out how to hide spinner

But from what I understood the documentation and browsing on your forums

public dataSourceChanged(state: DataSourceChangedEventArgs): void {
  if (state.action === 'add') {
    this.orderService.addRecord(state).then(() => state.endEdit());
  } else if (state.action === 'edit') {
    this.orderService.updateRecord(state).then(() => state.endEdit());
  } else if (state.requestType === 'delete') {
    this.orderService.deleteRecord(state).then(() => state.endEdit());
  }
}in the example state.endEdit() removes the spinner but it exits the edit mode. I would like to remain in the edit mode of the field and show the server side validation state.cancelEdit() does not work same as state.cancel = true or am i missing something as spinner is still showingSo I went with another approach and in actionBegin and there if i addd state.cancel = true it stays inside the field but as soon as I put a promise inside the callback for a server request the spinner is not removed on error even with cancelEdit() or state.cancel = true; what am i missing here?

Pavithra Subramaniyam · Accepted Answer

Hi Marac,For the “add” action we suggest calling the “hideSpinner” method when your server-side validation gets failed. Please refer to the below code example and API link for more information. function dataSourceChanged(state) { if (state.action === "add") { addOrder(state.data).then(res => { if (res.statusText == "Not Found") { gridInstance.hideSpinner(); } else { state.endEdit(); } }); } } [Grid] (gridInstance = grid)}> . . . API: https://ej2.syncfusion.com/react/documentation/api/grid/#hidespinnerPlease get back to us if you need further assistance on this.Regards,Pavithra S

Pavithra Subramaniyam · Answer

Hi Marac,Thanks for contacting Syncfusion support.By default, calling the “state.cancelEdit” will hide
the spinner and remains in edit state. You can call the “cancelEdit” or
“endEdit” method based on the server response inside the “dataSourceChanged”
event itself. Please refer to the below code example and attached sample which
is prepared based on your requirement.

If you are still facing the issue, please share the below
details that will be helpful for us to provide a better solution as early as
possible.
 Share the full Grid code
     example
 Is there any script
     error?
 Have you included any
     custom spinner at your end?
 Share the Syncfusion
     package version
Regards,Pavithra S

Marac · Answer

I went and tried your example, when the action is edit,

state.cancelEdit(); works, but for example if action is "add"

state.cancelEdit();

does not work in

dataSourceChanged(state) funtion

(for example when creating record if it is duplicate). In your example if I put state.cancelEdit() on action "add" (instead of endEdit() ), the spinner will not hideI am not using custom spinner, there is no script error and ej2-react-grids is version 19.4.56

Marac · Answer

I have one more question, with showing the remote validation after hiding the spinner I am trying to show the validation message as

const field = gridInstance.getColumnByField(key);
field.validationRules = {
  required: [true, value],
};

But the message does not show, when I console log gridInstance after I can see that it has the validationRules on columnModel.

Pavithra Subramaniyam · Answer

Hi Marac,Since you are trying to set the validation rules dynamically
based on the server response, we suggest setting the rules for the Form
Validator library instead of grid columns.  Please refer to the below code
example and API link for more information.

API: https://ej2.syncfusion.com/javascript/documentation/api/form-validator#addrules        https://ej2.syncfusion.com/javascript/documentation/api/form-validator#validatePlease get back to us if you need further assistance on
this.Regards,Pavithra S

Marac · Answer

I managed to get it done, but one more thing I would like to know is how to show dialog like this in a grid

with a custom message from the backend (OK should just close it). Is there a way to access it from gridInstance?

Pavithra Subramaniyam · Answer

Hi Marac,You can achieve your requirement by showing the Grid edit module alert Dialog with the response text from the server. Please refer to the below code example and API link for more information. function dataSourceChanged(state) { if (state.action === "add") { addOrder(state.data) .then(res => { if (res.statusText == "Not Found") { // set content and show the dialog here gridInstance.editModule.alertDObj.content = '

' + res.statusText + '

'; gridInstance.editModule.alertDObj.dataBind(); gridInstance.editModule.alertDObj.show(); state.form.ej2_instances[0].addRules('ShipCountry', { required: true }); state.form.ej2_instances[0].validate() gridInstance.hideSpinner(); } else { state.endEdit(); } }); } } API : https://ej2.syncfusion.com/react/documentation/api/dialog/#content https://ej2.syncfusion.com/react/documentation/api/dialog/#showPlease get back to us if you need further assistance on this.Regards,Pavithra S