1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How can i have a validation event when updating a row ?

How can i have a validation event when updating a row ?

Hi,

I'm in normal edit-mode (not batch), and i would like to display a confirmation message (with yes/no buttons) before validating a row update.
The confirmation message must contains one or several values entered in the grid cell(s).
Exemple : Are you sure to enter 2 in CustomerID and Boston in Country ?

How can i do this in ASP.NET CORE syntax please ?

Thx.
FreD.

13 Replies
IR Isuriya Rajan Syncfusion Team April 13, 2018 09:12 AM UTC

Hi Frédéric, 
 
Thanks for contacting Syncfusion support 
We have achieved your requirement in actionBegin event. This event will trigger when every grid action begins. Here we have customized the confirmation message in action begin event. Using this you can show the confirmation dialog before saving the edited data. 

Refer the below code example 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource"  actionBegin="begin" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"  > 
<e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 
</e-grid-columns> 
</ejs-grid> 
 
<script> 
function begin(args) {  
        if (args.requestType == "save") { 
            var grid = document.getElementById("Grid").ej2_instances[0]; 
           var message = "Are you sure to enter "+ args.data.OrderID +" in OrderID and " +  args.data.ShipCountry + " in Country"  
          
       if (isupdate) { 
             if (confirm(message)){ 
                //if yes ,data will save  
          } 
          else  
            args.cancel = true // if no the data wount save 
         } 
         isupdate = false 
      } 
    } 
function toolbarClick(args) {  
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.properties.prefixIcon == "e-update") {  
             isupdate = true 
        } 
             
    } 
</script> 


Refer the below sample and documentation for your reference: 



If you misunderstood your query please get back to us. 

Regards, 
Isuriya R 
 


FP Frédéric Peyronnin April 13, 2018 01:55 PM UTC

Thx a lot for your answer. It works !

The difficulty i have is to find information in your (pretty big) documentations.

I knew that i have to use action-begin to solve my problem, but where could i find documentation on args values (exemple : args.requestType == "save")
I search in ASP.NET CORE documentation, javascript documentation, but without success.

Are they other documentations ?

DR Dhivya Rajendran Syncfusion Team April 16, 2018 12:48 PM UTC

Hi Frédéric, 
 
Thanks for you update, 
 
We are glad to hear that your issue has been resolved. Currently, we have help documentation for API and its arguments only. As per your suggestion, we will add the argument values for the event  in the documentation and it will be refreshed in any of our upcoming releases. 
 
Please get back to us if you need further assistance. 
 
Regards, 
R.Dhivya 


FP Frédéric Peyronnin April 17, 2018 04:10 PM UTC

Thx a lot.

I have another request : How can i do the same thing in edit batch mode ?

I would like to display a confirmation message (with yes/no buttons) before validating all the rows update.
The confirmation message must contains one or several values entered in the grid cell(s), for all the rows edited.
Exemple : Are you sure to enter 2 in CustomerID and Boston in Country for the row n° 1 ?\nAre you sure to enter 3 in CustomerID and Orlando in Country for the row n° 2 ? \n etc...

I tried "args.requestType == "batchsave" in action-begin but it seems that it's not called by the save button of the grid toolbar ?

RS Renjith Singh Rajendran Syncfusion Team April 18, 2018 12:38 PM UTC

Hi Frédéric, 

By default, the batch mode of editing shows a confirmation dialog when the update icon in the toolbar is clicked. To show a customized confirmation dialog for the batch mode of editing, just like what we have provided for the normal mode of editing we suggest you to follow the below codes. 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" beforeBatchSave="SaveBatch" toolbarClick="toolbarClick" allowGrouping="true"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch" showConfirmDialog="false"></e-grid-editSettings> 
    ... 
</ejs-grid> 
 
<script> 
     
    function SaveBatch(args) {  
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var message = ""; 
        for (var i = 0; i < args.batchChanges.changedRecords.length; i++) { 
            var message = message +"\n" + "Are you sure to enter " + args.batchChanges.changedRecords[i].OrderID + " in OrderID and " + args.batchChanges.changedRecords[i].ShipCountry + " in Country" +" for the row "+ i 
        } 
         if (isupdate) { 
             if (confirm(message)){ 
                //if yes ,data will save  
          } 
          else  
            args.cancel = true // if no the data wount save 
         } 
         isupdate = false 
      } 
 
    function toolbarClick(args) {  
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.properties.prefixIcon == "e-update") {  
             isupdate = true 
        }  
    } 
    
</script> 
 
In the above code example, we have disabled the default batch confirmation dialog by setting the “showConfirmDialog” property of Grid as false. Then in the “beforeBatchSave” event of Grid we have opened the confirmation as just like the normal edit confirmation message from our previous update. There is no need to check for request types, as the beforeBatchSave event will be triggered only before a batch save action is performed. Please refer the documentation links below, 

Documentations :  
 
We have also modified the sample from our previous response, based on your requirement, please download from the link below, 

 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


FP Frédéric Peyronnin April 18, 2018 01:25 PM UTC

Thx a lot, it works !

One last question, how can i quit the batch edit mode after update rows in controler ?

In the controler, i end the update function with :
            //Update record in database
            return Json(value.Value);

but in my view, it is still in update mode :


I would like to automatically quit the edit mode after updating the rows ?


IR Isuriya Rajan Syncfusion Team April 19, 2018 12:55 PM UTC

Hi Frédéric, 
 
Before validating your query, we need some clarification. While checking the provided screenshot we can see that you have used the EJ1 grid control. Can you please confirm to us, which grid you are using whether EJ1 or EJ2 grid? 
 
Refer the below online demo and documentation link for both EJ1 and EJ2 grids: 
 
 
 
 
 
Regards, 
Isuriya R  



FP Frédéric Peyronnin April 19, 2018 02:08 PM UTC

Hi,

Yes i'm using EJ1.

Thx.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 20, 2018 12:38 PM UTC

Hi Frédéric, 
 
Query # :- How can i quit the batch edit mode after update rows in controller ? 
 
We have checked your query and while using batchUpdate from the controller side, it will update the records into the database and it will automatically refresh the dataSource with newly updated records. Please ensure that you have followed the steps in the demo and code example 
 
Please refer to the code example 
<ej-grid id="FlatGrid" allow-paging="true"> 
            <e-datamanager url="/Home/DataSource" batch-url="/Home/BatchUpdate" adaptor="UrlAdaptor" /> 
            <e-columns> 
                .   .    . 
            </e-columns> 
        </ej-grid> 
 
public ActionResult BatchUpdate([FromBody]submitvalue myObject) 
        { 
            if (myObject.Changed != null && myObject.Changed.Count > 0) 
            { 
                foreach (var temp in myObject.Changed) 
                { 
                    var ord = temp; 
                    Order val = orddata.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
                    val.OrderID = ord.OrderID; 
                    val.EmployeeID = ord.EmployeeID; 
                    val.CustomerID = ord.CustomerID; 
                    val.Freight = ord.Freight; 
                    val.OrderDate = ord.OrderDate; 
                    val.ShipCity = ord.ShipCity; 
                } 
            } 
            if (myObject.Added != null && myObject.Added.Count > 0) 
            { 
                foreach (var temp in myObject.Added) 
                { 
                    orddata.Insert(0, temp); 
                } 
            } 
            if (myObject.Deleted != null && myObject.Deleted.Count > 0) 
            { 
                foreach (var temp in myObject.Deleted) 
                { 
                    orddata.Remove(orddata.Where(or => or.OrderID == temp.OrderID).FirstOrDefault()); 
                } 
            } 
 
            var data = orddata; 
            return Json(data); 
        } 
 
 
Please refer to the Online Demo Link:- 

We need some addditonal details to find the cause of the issue. Please share us the following details. 

1. Share your Grid code example(both in server and client side). 
2. Is there any actionFailure event trigger while on updating the records. 
3. Screenshot/Video Demo to replicate the issue. 

Regards, 

Farveen sulthana T 




FP Frédéric Peyronnin replied to Renjith Singh Rajendran April 20, 2018 02:47 PM UTC

Hi Frédéric, 

By default, the batch mode of editing shows a confirmation dialog when the update icon in the toolbar is clicked. To show a customized confirmation dialog for the batch mode of editing, just like what we have provided for the normal mode of editing we suggest you to follow the below codes. 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" beforeBatchSave="SaveBatch" toolbarClick="toolbarClick" allowGrouping="true"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch" showConfirmDialog="false"></e-grid-editSettings> 
    ... 
</ejs-grid> 
 
<script> 
     
    function SaveBatch(args) {  
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var message = ""; 
        for (var i = 0; i < args.batchChanges.changedRecords.length; i++) { 
            var message = message +"\n" + "Are you sure to enter " + args.batchChanges.changedRecords[i].OrderID + " in OrderID and " + args.batchChanges.changedRecords[i].ShipCountry + " in Country" +" for the row "+ i 
        } 
         if (isupdate) { 
             if (confirm(message)){ 
                //if yes ,data will save  
          } 
          else  
            args.cancel = true // if no the data wount save 
         } 
         isupdate = false 
      } 
 
    function toolbarClick(args) {  
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.properties.prefixIcon == "e-update") {  
             isupdate = true 
        }  
    } 
    
</script> 
 
In the above code example, we have disabled the default batch confirmation dialog by setting the “showConfirmDialog” property of Grid as false. Then in the “beforeBatchSave” event of Grid we have opened the confirmation as just like the normal edit confirmation message from our previous update. There is no need to check for request types, as the beforeBatchSave event will be triggered only before a batch save action is performed. Please refer the documentation links below, 

Documentations :  
 
We have also modified the sample from our previous response, based on your requirement, please download from the link below, 

 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Thx.

I have a problem with the confirmation message box. I can't use the native browser "confirm" function, i have to use one more complex and pretty. Is it possible to use your dialog component ?

My problem is when i use another dialog box, it's not blocking (like confirm, alert, prompt), and the function continues and i jump to my controler (batch-url="/Logged/AnalysesEchantillonsListCellEditUpdate") BEFORE the dialog box appears !

Do you have any solution please ?

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 24, 2018 04:16 PM UTC

Hi Frederic,  

We have checked the query and based on the requirement we have prepared a sample by showing the customized dialog for the grid while saving changes.   
Code example  
<script>  
    setTimeout(function () {        
        var confirmDialogObj = document.getElementById('confirm_dialog').ej2_instances[0];  
        confirmDialogObj.hide();   //hiding at initial time  
    }, 500)   
</script>  
<div class=" col-lg-8 control-section" id="target">  
    <ejs-dialog id="confirm_dialog" open="dialogOpen" close="dialogClose" width="400px"target="#target" visible="false" content="Sure need to be updated?"showCloseIcon="true">  
        <e-dialog-buttons>  
            <e-dialog-dialogbutton buttonModel="ViewBag.Okbutton"click="dlgButtonOkClick"></e-dialog-dialogbutton>  
  
            <e-dialog-dialogbutton buttonModel="ViewBag.Cancelbutton"click="dlgButtonCancelClick"></e-dialog-dialogbutton>  
        </e-dialog-buttons>  
  
    </ejs-dialog>  
    </div>  
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" height="315" allowPaging="true"beforeBatchSave="SaveBatch" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel" })" locale="es-AR" allowGrouping="true">  
...  
    </ejs-grid>  
  
    <script type="text/javascript">  
...  
        function dlgButtonOkClick() {  
            var dialogObj = document.getElementById("confirm_dialog")  
            dialogObj.ej2_instances[0].hide();  
  
//close the dialog.        
  }  
    </script>  
  
    <script>  
        function dlgButtonCancelClick(args) {  
            ...  //perform cancel operation in grid  
         }  
  
        function SaveBatch(args) {  
            var grid = document.getElementById("Grid").ej2_instances[0];  
            var dialog = document.getElementById("confirm_dialog").ej2_instances[0];  
            document.getElementById("confirm_dialog").style["left"] = "330px";  
            document.getElementById("confirm_dialog").style["top"] = "210px";  
            dialog.show();     //showing the dialog while saving the record.          
        }        
  
    </script>  
  
 
 
From the above code example, we have performed the customized dialog while updating the modified records in the grid.  

Please let us know if you need further assistance.   

Regards, 
Farveen sulthana T 



FP Frédéric Peyronnin April 24, 2018 08:48 PM UTC

Thank's, it is a great solution, but how can i dynamically change the content of the dialog box ?

I see you have a "content" tag, but how can i access it and change it in the "BeforeBatchSsave" function. I would like to add a message like this : 
        var message = "Are-you sure to have entered these values for :<br>";
        for (var i = 0; i < args.batchChanges.changed.length; i++)
        {
            var message = message + "<br>" + args.batchChanges.changed[i].strANA_LibelleParam + " : " + args.batchChanges.changed[i].strECH_ANA_Resultat;
        }

And replace the content value of the dialog box with my message.

Is it possible please ?

RS Renjith Singh Rajendran Syncfusion Team April 25, 2018 12:46 PM UTC

Hi Frederic, 

We have analyzed your query. We suspect that you would like to display your own custom message, in the default confirmation dialog, which is shown during batch editing. We suggest you to modify the sample from our previous response, based on the code example below, 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" height="315" allowPaging="true" toolbarClick="toolbarClick" > 
    ... 
</ejs-grid> 
 
<script> 
 
     function toolbarClick(args) {  
         var grid = document.getElementById("Grid").ej2_instances[0]; 
         ... 
        grid.localeObj.localeStrings.BatchSaveConfirm = message; 
    } 
    
</script> 

In the above code, we have updated the value for the BatchSaveConfirm(By default its value is “Are you sure you want to save changes?”) with the message you wish to display in the save confirm dialog in the toolbarClick event of Grid. 

We have also modified the sample, based on this requirement which could be downloaded from the link below, 
 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon