Add custom function to SAVE button

[Teddy Kubheka]

Greetings, 

Please can you lead me in the right direction. I would like to know how to add custom functionality to the Save button of an editable gridview. No too sure how to go about it. I would like to add automated email notification functionality. 

ASP.NET

C#

[Shek Mohammed Asiq Abdul Jabbar]

Hi Teddy,

Greetings from Syncfusion support.

Query: I would like to know how to add custom functionality to the Save button of an editable gridview. 

You can customize the save action using the actionComplete event handler in the Grid. Based on the ID of the Save button, you can implement the required behavior. Please refer to the following code snippet:

function actionComplete (args) {

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

           $("#EditDialog_MainContent_FlatGrid_Save").ejButton({

                click: function (args) {

                   // you can customize here.

             }

          });

        }

     }

 

If you have any queries, please get back to us. We are happy to assist you.

Regards,

Shek

[Teddy Kubheka]

Thanks, 

I am looking to do this on my .cs file. I would like to send an email update to clients after clicking save. 

1. How do you do this on my ,cs file
2. How do I store data into variables (like client name and email address) using this method.

Thank you.

[Farveen Sulthana Thameeztheen Basha]

Hi Teddy Kubheka,

To achieve your requirement of retrieving the edited record details at the server end, we recommend using an AJAX post request in the ActionComplete event of the Grid. When an edit operation is completed (with requestType = "save"), the modified data args.data is sent to the server. So you can process the data on the server-side and store it as needed.

API link:- https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete

Refer to the code below:-

Default.aspx:-

 

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true" >

  

   <ClientSideEvents ActionComplete ="complete"/>

   <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

   <Columns>

         .     .   .

  </Columns>

  </ej:Grid>

 

<script>

    function complete(args) {

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

            var obj = $("#<%=FlatGrid.ClientID%>").ejGrid("instance");

            var data = JSON.stringify({ modifieddata: args.data });  //get the edited value from args.data  

            $.ajax({

               url: "Default.aspx/Update",

                type: "POST",

                dataType: "json",

                contentType: "application/json",

                data: data,     //get the changes and update on serverside

                success: function (value) {

                    alert("Save Complete")

            },

            error: function (xhr) {

             alert('error');

           }

        });

      }

    }

</script>

 

 

Default.aspx.cs:-

 

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

  public static string Update(object modifieddata)  {

    // Convert the object to a Dictionary

    var dataDict = JsonConvert.DeserializeObject<Dictionary<string, object>>(JsonConvert.SerializeObject(modifieddata));

 

    // Extract values

    int orderID = dataDict.ContainsKey("OrderID") ? Convert.ToInt32(dataDict["OrderID"]) : 0;

    string customerID = dataDict.ContainsKey("CustomerID") ? dataDict["CustomerID"]?.ToString() : "";

 

    return JsonConvert.SerializeObject(new { success = true });

}

Screenshot:-

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

Regards,
Farveen sulthana T