1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Batch Save a Grid with a button click

Batch Save a Grid with a button click

I have a grid that uses the remote save adaptor. I have set it up so that I can add and edit individual records with the edit dialog. I also need to be able to batch save the records in the grid with a button click. 

Code:

 @Html.EJS().Grid("ContainerGrid").DataSource(DataManager => { DataManager.Json(@Model.ContainerTransactions.ToArray()).InsertUrl("Home/AddContainerItem").UpdateUrl("Home/UpdateContainerItem").RemoveUrl("Home/DeleteContainerItem").Adaptor("RemoteSaveAdaptor"); }).Width("auto").Columns(col =>

        {

            col.Field("InventoryID").HeaderText("Item").IsPrimaryKey(true).Width("40").EditType("dropdownedit").Edit(new { @params = itemDropDown }).ValidationRules(new { required = true }).Add();

            col.Field("ContainerID").ValueAccessor(containerAccessor).IsPrimaryKey(true).Visible(false).Add();

            col.Field("Description").HeaderText("Description").ValueAccessor(descriptionAccessor).Width("90").Add();

           ...

        }).ActionBegin("actionBegin").ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit","Delete" }).Render()

<div class="row mt-2 mb-2">

                <div class="col-sm-12 col-lg-12 col-md-12">

                    <div id="submitbutton" class="float-right">

                        <input type="submit" value="Confirm" class="btn btn-primary"/>

                    </div>

                    <div id="submitbutton" class="float-right mr-2">

                        <input type="submit" value="Cancel" class="btn btn-primary"/>

                    </div>

                </div>

            </div>

When I click the confirm button below I need to be able to batch save the records in the grid.




4 Replies
AG Ajith Govarthan Syncfusion Team August 3, 2021 05:08 PM UTC

Hi Danyelle, 

Thanks for contacting Syncfusion support. 

Query: I have a grid that uses the remote save adaptor. I have set it up so that I can add and edit individual records with the edit dialog. I also need to be able to batch save the records in the grid with a button click. 
 
Based on your attached code example, you want to perform the CRUD actions at the UI level and when you press the submit button you want to update all the changes to the server side. So, by default, in our EJ2 Grid we have batch edit mode. 

Using the batch edit mode you can perform the CRUD actions at the UI level, and you can send the changes to the server side when press the update button or you can have an external button to pass the changes to the server side. It is not feasible to perform the batch operations with dialog edit mode in our EJ2 Grid. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 
Index.cshtml 

 
<button class="c-btn">Submit </button> 
@Html.EJS().Grid("FlatGrid").DataSource(dataManager => { dataManager.Json(ViewBag.DataSource2.ToArray()).BatchUrl("/Home/BatchUpdate").Adaptor("RemoteSaveAdaptor"); 
 
}).Width("800").Columns(col => 
{ 
    col.Field("UnitID").HeaderText("Unit ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    col.Field("N1").HeaderText("N1").Width("125").Format("N0").Add(); 
    col.Field("N2").HeaderText("N2").Width("170").Format("N0").Add(); 
 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string> 
    () { "Add", "Edit", "Delete", "Cancel" }).Render() 
 
 
 
<script> 
    document.getElementsByClassName("c-btn")[0].addEventListener("click", () => { 
        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
        grid.endEdit(); 
    }) 
 
  
</script> 





UG-links: 

Please get back to us if you need further assistance. 

Regards, 
Ajith G. 



DA Danyelle August 5, 2021 02:38 PM UTC

I need to add/edit/delete one record at a time so that each record is set to pending. Then I need to be able to click the confirm button and update all of the records to be submitted. I am using a Model from a view to populate my grid. How can I pass the grid data to the controller when I click the confirm button? Maybe through a button click that sends the grid data to ajax call?


DA Danyelle August 5, 2021 04:34 PM UTC

I have tried to do it this way and I am getting the data from the grid but when am getting null in the action method on the controller.

document.getElementById("submitbtn").addEventListener("click", function () {

        debugger;

        var gridObj = document.getElementById("ContainerGrid").ej2_instances[0];


        var g = gridObj.dataSource;

        var ajax = new ej.base.Ajax({

            url: 'Home/SubmitContainerTransactions',

            type: 'POST',

            data: JSON.stringify( g )


        });

        ajax.send();

    });


Controller

 public ActionResult SubmitContainerTransactions([FromBody] List<ContainerTransaction> containerTransactions)

        {



            return Json(new { result = containerTransactions });

        }


AG Ajith Govarthan Syncfusion Team August 9, 2021 03:38 AM UTC

Hi Danyelle, 

Thanks for the update. 

Query: I need to add/edit/delete one record at a time so that each record is set to pending. Then I need to be able to click the confirm button and update all of the records to be submitted. I am using a Model from a view to populate my grid. How can I pass the grid data to the controller when I click the confirm button? Maybe through a button click that sends the grid data to ajax call? 
 
By default, in our EJ2 Grid we have three kinds of edit modes. In that Inline and Dialog edit modes will update the changes immediately when you perform the CRUD action. For example, when you perform the Edit or add operation then the respective added or changed data is updated in the Grid component by calling the respective server-side methods. 

 As per your requirement you want to virtually show the changes in the Grid component for the added, removed and edit records and when you press the submit button you need to update the changes to the server side. So, you can achieve your requirement with our Batch edit mode, using our batch edit mode you can edit , delete and add records in the Grid client side, and you can update the changes to the server side when you press the update button in the toolbar. 

 The changes in the grid component will be displayed as green color cells. As per your requirement you want to update the changes in the server side with external button. So, you can update the changes by calling the endEdit or batchSave method in the click event of the external button. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 
Index.cshtml 

 
<button class="c-btn">Submit </button> 
@Html.EJS().Grid("FlatGrid").DataSource(dataManager => { dataManager.Json(ViewBag.DataSource2.ToArray()).BatchUrl("/Home/BatchUpdate").Adaptor("RemoteSaveAdaptor"); 
 
}).Width("800").Columns(col => 
{ 
    col.Field("UnitID").HeaderText("Unit ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    col.Field("N1").HeaderText("N1").Width("125").Format("N0").Add(); 
    col.Field("N2").HeaderText("N2").Width("170").Format("N0").Add(); 
 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List<string> 
    () { "Add", "Edit", "Delete", "Cancel" }).Render() 
 
 
 
<script> 
    document.getElementsByClassName("c-btn")[0].addEventListener("click", () => { 
        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
        grid.endEdit(); // update the changes to the server side. 
    }) 
 
  
</script> 
 




UG-links: 

If you still face the issue, then please share your exact requirement and also share the use case of using the ajax call in the click event of the submit button. 

Please get back to us if you need further assistance. 

Regards, 
Ajith G. 



Loader.
Up arrow icon