Continuing the save process after AJAX validation

[Taylor Tillman]

I have a grid that allows inline editing and I need to check the values of one of the columns and prevent saving if there's a duplicate. I've been following the guide here to accomplish this with an AJAX request. I have been able to prevent saving by settings args.cancel = true before the request, but when it reaches this section in the success function it fails because gridobj is undefined:

     var gridobj = $('#AGrid').data('ejGrid');

     gridobj.endEdit();

I have also tried using the EJ2 code for endEdit() here:

     var gridObj = document.getElementById('Grid').ej2_instances[0];

     gridObj.endEdit();

My grid is initialized in the view with this code:

     @(Html.EJS().Grid("Grid").Toolbar(toolbarOptions).EditSettings(editSettings).ActionBegin("actionBegin").DataSource(datamanager => ....

[Pavithra Subramaniyam]

Hi Taylor, 

Thanks for conducting Syncfusion support. 

We have validated your query “Continuing the save process after AJAX validation” at our end. 

By default, You can achieve your requirement using actionBegin event. Here we have to validate the required column value before saving. 

If the changed value doesn’t meet your validation state, you have to call closeEdit() method instead of endEdit(). 

closeEdit() method used to destroy the edit form. If validation throws the success, changed value will be updated in dataSource. 

Please refer to the below code example and sample. 

 

@Html.EJS().Grid("DefaultPaging").ActionBegin("ActionBeginEvent") . . . ..Render() 

 

function ActionBeginEvent(args) { 

        if (args.requestType == 'save') { 

            var gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

            if (args.data.CustomerID.length < 5) {   // you can write validation condition here..... 

                args.cancel = true; 

                gridObj.closeEdit(); 

            } 

        } 

    } 

 

Documentaion: https://ej2.syncfusion.com/javascript/documentation/api/grid/#closeedit 

 

Sample Link     : https://www.syncfusion.com/downloads/support/forum/148147/ze/148147-mvc-url-adaptor1782995899 

Still the above sample and code block don’t meet your requirement please share the below details for further updates. 

1. Share which adaptor you are using in your application.
2. Full code snippet
3. Expecting output image

Regards, 

Pavithra S. 

[Taylor Tillman]

Hi Pavithra,

Thanks, this helped. I ended up having to add the flag variable as shown in the knowledge base article I linked but I was having also having problems getting the grid object. Your method of  var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; ended up working.

[Pavithra Subramaniyam]

Hi Taylor, 

 

Thanks for your update. 

 

We are happy to hear that the provided information helps you. 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.