ej:Grid OnServerBatchEditRow works with the toolbar save button but not an external save button

[Michael Dittmer]

I have an ej:Grid and I'm doing server-side processing. My grid parameters include EditMode="batch", and OnServerBatchEditRow="batchChanges".  If I click on the toolbar save button, batchChanges() in the code behind file is executed properly.  If I click on an external Save/commit button, batchChanges() is not executed at all.  I'm not sure if it work, but I could potentially call batchChanges with the commit button, but it needs GridEventArgs, and the commit only has System.EventArgs. Any thoughts on how I can get the external save button to process batchChanges?

[Michael Dittmer]

Added the UI and code behind files if that helps

Attachment: Posn_Work_Schedule_db67b8ed.zip

[Pon Selva Jeganathan]

Hi Michael, 

 

Thanks for contacting Syncfusion forum 

 

Query: Any thoughts on how I can get the external save button to process batchChanges?

We have analyzed query and found that you need to save the batch changes in the server end on external Button Click.

We suggest you to use an ajax post to send the batch changes instead of invoking the server event manually. Please refer to the following example. 

  <input type="button" value="Save" onclick="SaveHandler()" /> 

       

<ej:Grid runat="server" ID="Grid1"  AllowFiltering="true" 

                             AllowPaging="true"  

                            EnableToolbarItems="True" > 

<pagesettings pagesize="12" PageCount="4" /> 

    <EditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" EditMode="Batch" /> 

                               

            ….. 

</ej:Grid> 

 

<script> 

        function SaveHandler(e) { 

            

            var obj = $('#<%= Grid1.ClientID %>').data("ejGrid");//instance 

           var data=obj.getBatchChanges(); 

            var args = {changed:data.changed,added:data.added,deleted:data.deleted}; 

            $.ajax({ 

                url: "Default.aspx/ServerBatchEditRow", 

                type: "POST", 

                contentType: "application/json; charset=utf-8", 

                data: JSON.stringify(args) 

            }); 

        } 

 

 

    </script> 

 

Code behind: 

 

[WebMethod] 

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] // Return the JSON formatted result 

        public static void ServerBatchEditRow(List<object> changed, List<object> added, List<object> deleted) 

 

        { 

 

            

 

        } 

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/forum/168088/ze/webform_-sample-2055036016

Please refer to the below API documentation,

https://help.syncfusion.com/api/js/ejgrid#methods:getbatchchanges

Kindly get back to us for further assistance.

Regards,   

Pon selva    

 

[Michael Dittmer]

Thanks very much for the solution you proposed.  However, I would prefer not to use an Ajax call.  The reason I used OnServerBatchEditRow was to make the changes available in the code behind.  I did not realize that the referenced function, batchChanges, would only execute via the toolbar save button.  My external save button actually calls a function in the code behind.  From there, I could call the batchChanges function if I could provide the GridEventArgs from the code behind. 

[Pon Selva Jeganathan]

Hi Michael, 

  

Thanks for the update 

  

Query: My external save button actually calls a function in the code behind.  From there, I could call the batchChanges function if I could provide the GridEventArgs from the code behind. 

 

It is not possible to trigger the “OnServerBatchEdit” Grid Server event by server end button click.

So we recommend that you trigger the server event by calling the batchSave method of Grid when the client end button is clicked. It will trigger the “OnServerBatchEdit” Grid Server event. Please refer to the following example. 

  

 <ej:Button ID="btnNovo" Type="Button" runat="server" Text="save" ClientSideOnClick="click" /> 

       

<ej:Grid runat="server" ID="Grid1"  AllowFiltering="true" 

                             AllowPaging="true"  OnServerBatchEditRow="ServerBatchEditRow" 

                            EnableToolbarItems="True" > 

<pagesettings pagesize="12" PageCount="4" /> 

    <EditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" EditMode="Batch" /> 

                               

            ….. 

</ej:Grid> 

  

<script> 

function click(args) { 

  

                    var gridObj = $("#Grid1").data("ejGrid"); 

                    gridObj.batchSave(); 

  

                } 

  

    </script> 

  

Code behind: 

  

  public void ServerBatchEditRow(object sender, GridEventArgs e) 

  

        { 

  

            //code corresponding to any custom operation 

  

        } 

Please refer to the below screenshot,

 

 

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/forum/168088/ze/webform_-sample-471133866

 

Please refer to the below API documentation,

https://help.syncfusion.com/api/js/ejgrid#methods:batchsave

Kindly get back to us for further assistance.

 

Regards,   

Pon selva    

  

[Padmini Ramamurthy]

From: Michael Dittmer
Sent: Thursday, August 19, 2021 5:22 PM
To: Syncfusion Support <[email protected]>
Subject: Re: Syncfusion Forum [168088] has a new reply - ej:Grid OnServerBatchEditRow works with the toolbar save button but not an external save button 

Thanks very much for the suggested changes.  If I add the hidden field and the beforeBatchSave, then the client-side external button will in fact call the click function to do the batchSave() and then reach the code behind  ServerBatchEditRow function.   

 

I apologize if I wasn't clear, but my external button is being processed in the code behind, as shown below.  The challenge is that I need to invoke the click function in your example (that has objGrid.batchSave) from the code behind, basically a code behind call to a javascript function in the client. 

 

My code behind call is similar to the following:  

Protected Sub btnCommit_Click(sender As Object, e As EventArgs) Handles btnCommit.Click 

       Me.Posn_Work_Schedule.Commit(sender, e) 'This is in a different code behind file 

End Sub  

 

The above calls the Commit within the Posn_Work_Schedule code behind: 

Sub Commit(ByVal sender As Object, ByVal e As System.EventArgs) 

       (Want to save the data here, but gridObj.batchSave() has not been executed yet so the ServerBatchEditRow batch changes are not available) 

End Sub  

 

The real question is: Is there a way to execute your example client-side function (click) from the code behind file - or is there an alternative way to make the batch changes available inside Commit? 

[Michael Dittmer]

It looks like Padmini Ramamurthy tried to reply a few hours ago, but I don't see any details.  I would greatly appreciate any possible solution.  

[Pon Selva Jeganathan]

Hi Michael,   

 

Thanks for the update. 

 

Query: Is there a way to execute your example client-side function (click) from the code behind file? 

 

Based on your query, we suggest you use the ResgisterStartupScript method to call a JavaScript function from the server.  

 

Please refer to the below code snippet, 

 

<ej:Button ID="btnNovo" Type="Button" runat="server" Text="save" OnClick="ejbtn_Click"  />   

    

<ej:Grid runat="server" ID="Grid1"  AllowFiltering="true" 

                             AllowPaging="true"  

…… 

             

             

</ej:Grid> 

            <script type="text/javascript">  

                

                function click(args) { 

                  

                    var gridObj = $("#Grid1").data("ejGrid"); 

                    gridObj.batchSave(); 

 

              } 

               

 

            </script>  

 

 

Code behind: 

 

protected void ejbtn_Click(object sender, ButtonEventArgs e) 

        { 

       

      string script = "window.onload = function() { click(); };"; 

      ClientScript.RegisterStartupScript(this.GetType(), "click", script, true); 

 

    } 

 

Please refer to the below link for more details. 

https://stackoverflow.com/questions/5731224/calling-javascript-function-from-codebehind/53588613#53588613 

 

Kindly get back to us for further assistance. 

 

Regards, 

Pon selva  

[Michael Dittmer]

Thanks very much for the help.  This solution does help us call a Javascript function from the code behind, and run the batchSave.  We had hoped that running the batchSave would then trigger the ServerBatchEditRow in the code behind like the toolbar save button does.  However, it did not.  So now it seems we've come full circle.  Perhaps it would be beneficial to retrace our steps to fully clarify the issue.

1) We have an ej:Grid and we want to save the batch changes using a Commit button that runs in the code behind.

2) In the grid settings, we have Edit mode=batch and OnServerBatchEditRow= ServerBatchEditRow.  

3) When we make changes in the grid, it was hoped that those changes would be accessible from the code behind in ServerBatchEditRow.  We did not realize that the changes needed to be saved to the grid before this can happen.

4) For testing, we added the toolbar and used the update/save button.  The ServerBatchEditRow in the code behind was called and we were able to retrieve the batch changes.  However, we would prefer not to use the toolbar since  we already have an overall commit/save button that saves other changes to the database.  

5) Since we somehow needed to execute gridObj.batchSave() in the client in order to make the batch changes available in ServerBatchEditRow, we tried adding another button that would hopefully operate like the toolbar update/save button, but could also be hidden and then triggered from the code behind.  We added this button with ClientSideOnClick="saveChanges", and added the Javascript function saveChanges which called gridObj.batchSave().  Manually clicking this button did save the changes to the grid, and then made the call to ServerBatchEditRow in the code behind. Success.  All we had to do now was find a way to trigger this button from the code behind.

6) Your latest guidance provided a way to trigger the client saveChanges function from the code behind using ClientScript.RegisterStartupScript.  We tested this and it did execute the saveChanges function.  Unfortunately, the call to the ServerBatchEditRow in the code behind never occurred. We are not certain, but is it possible that the grid changes were lost as a result of the postback from the RegisterStartupScript, and therefore perhaps the  gridObj.batchSave() in the saveChanges function did not actually execute because it was empty? 

Any help in finding a way to resolve this final issue would be most appreciated. 

[Michael Dittmer]

Thanks for all the previous help.  We did find a way to avoid the post back condition.  Rather than invoke the RegisterStartupScript to inject a JavaScript function into the client side, causing the post back, we basically added a commit button click call in the prerender that then called the client-side function which contained the gridObj.batchSave() and allowed for the call to the code behind ServerBatchEditRow procedure.  

[Pon Selva Jeganathan]

Hi Michael,  

   

Thanks for the update . 

 

We are glad to hear your query has been solved. 

 

Kindly get back to us for further assistance. We are happy to assist you. 

Regards, 

Pon selva