dialog - prevent users to click save more than once

Question

Hi,

I am working with EJ1 syncfusion grid, with edit dialog
template. Everything works fine..but.. ☹

Since my dialog is large, have a lot of data to save, we
noticed that some of the users, during controller create execution , when DB response is slow, click
second time SAVE button on the dialog. In that case we got two same records in
the table.

Is that any way to prevent users to click more than once on
the add dialog? 

Thanks in advance.Attachment: index_513830d4.rar

Farveen Sulthana Thameeztheen Basha · Accepted Answer

Hi Enisa , Thanks for contacting Syncfusion Support. Query#:- Is that any way to prevent users to click more than once on the add dialog? We have achieved this requirement using ActionBegin event of the Grid. In this event, on saving the record(when requestType as save) we have disabled the Save button using disable method of the ejButton which prevents user to click the save button again. Also we have enabled the button on ActionComplete event of the Grid. Refer to the below code:- @(Html.EJ().Grid

Enisa Manjo · Answer

Dear Farveen Sulthana T ,this solution is satisfying when model is valid. But in the case when model is not valid, then the button remain disabled, what i would like to avoid. Is there any sloution available for this case?Regards,Enisa

Farveen Sulthana Thameeztheen Basha · Answer

Hi Enisa, Query#:- But in the case when model is not valid, then the button remain disabled, what i would like to avoid. Is there any solution available for this case? For this scenario ,when the model is Invalid at server end, ActionFailure Clientside event get triggers. So that you can again enable the save button using enable method of ejButton with this Event and perform further actions in it. Refer to the code below:- @(Html.EJ().Grid

Enisa Manjo · Answer

Dear Farveen Sulthana Thameeztheen ,on my grid I have           .ClientSideEvents(eve =>                                                                        {                                                                            eve.ActionBegin("onTargetActionBegin");                                                                            eve.ActionComplete("onTargetActionComplete");                                                                            eve.RowSelecting("rowSelecting");                                                                            eve.RowDataBound("onGridTargetRowDataBound");                                                                            eve.DataBound("onDataBound");                                                                            eve.ActionFailure("onGridActionFailure");                                                                        })and in my controller     public ActionResult Update_Target(TargetViewModel value)        {            try            {                if (!ModelState.IsValid )                {                    var error = "error";                    return BadRequest(error);                }...when I simulate error , the function "onGridActionFailure" never fired :(Best regards,Enisa

Farveen Sulthana Thameeztheen Basha · Answer

Hi Enisa, 

Query#:- when I simulate error , the function "onGridActionFailure" never fired :( 

We are unable to replicate the problem at our end(ActionFailure event fired when model is invalid). Refer to the sample Link:- 
https://www.syncfusion.com/downloads/support/forum/162196/ze/DialogTemplate-1160057188 

Refer to the code below:- 




GridFeatures.cshtml 
@(Html.EJ().Grid<object>("GridTarget") 
         .Datasource(ds => ds.URL("/Grid/UrlDataSource").UpdateURL("/Grid/UrlUpdate").InsertURL("/Grid/UrlInsert").RemoveURL("/Grid/UrlDelete") 
                   .Adaptor(AdaptorType.UrlAdaptor)) 
         .ClientSideEvents(Event=> Event.ActionComplete("actionComplete").ActionBegin("actionBegin").ActionFailure("failure")) 
          
                                                                edit.EditMode(Syncfusion.JavaScript.EditMode.DialogTemplate).DialogEditorTemplateID("#targetDialog"); 
 
      .Columns(col => 
         { 
             col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            .  .   . 
        }) 
) 

Serverside:- 
GridController.cs 
      public ActionResult UrlUpdate(Orders value) 
        { 
            if (!ModelState.IsValid) //if validation got failed 
            { 
                var message = string.Join(" | ", ModelState.Values 
                     .SelectMany(v => v.Errors) 
                      .Select(e => e.ErrorMessage)); 
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest, message);//message returns the exception content  
            } 
            var ord = value; 
            Orders val = order.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
              .  .   . 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 
        public ActionResult UrlInsert(Orders value) 
        { 
            if (!ModelState.IsValid) //if validation got failed 
             { 
                var message = string.Join(" | ", ModelState.Values 
                     .SelectMany(v => v.Errors) 
                      .Select(e => e.ErrorMessage)); 
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest, message);//message returns the exception content  
            } 
             
            order.Insert(0, value); 
            string msg = "Successfully performed editing the record"; 
            return Json(new { value = value, message = msg }); 
 
        } 
 
        [Serializable] 
        public class Orders 
        { 
             
            public long OrderID { get; set; } 
            
            [MinLength(3)] 
            public string CustomerID { get; set; } 
            public DateTime? OrderDate { get; set; } 
 
             
        } 


Note- Grid has been placed under Views->Grid/GridFeatures.cshtml page 

Screenshot:- 
  

We need some more additional details to find the cause of the issue. Share us the following details. 


Complete Grid code details(both client and server end).
If possible replicate the problem in the above sample and revert us back.
Screenshot/Video Demo to replicate the issue.
Product version details.

Regards,Farveen sulthana T