1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Second child datagrid batchSave

Second child datagrid batchSave

Hello, i am trying to save every SecondChildGrid edited row with external button, how can i do that?

var SecondChild = new Syncfusion.EJ2.Grids.Grid()

            {

                DataSource = new DataManager()

                {

                    Json =Model.salesOrderLines,

                    BatchUrl = Url.Action("/Sales/Update"),

                    Adaptor = "RemoteSaveAdaptor"

                },

                Id = "SecondChildGrid",

                QueryString = "orderLine",

                EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings()

                {

                    AllowEditing = true,

                    Mode = Syncfusion.EJ2.Grids.EditMode.Batch,

                    ShowConfirmDialog = false

                },

                Load = "OnLoadChild",

                Columns = new List {

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="orderLine",Visible=false,Width="80",AllowEditing=false, HeaderText="OrderLine",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="objectID",Width="80",AllowEditing=false, HeaderText="ObjectID",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="objectName",Width="80",AllowEditing=false, HeaderText="ObjectName", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="aQuantity",Width="80",AllowEditing=false, HeaderText="AQuantity",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="qtyForOrder",Width="80",AllowEditing=true,EditType="numericedit",HeaderText="QtyForOrder",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                }

            };


var FirstChild = new Syncfusion.EJ2.Grids.Grid()

            {

                DataSource = { },

                QueryString = "orderNo",

                Load = "OnLoadChild",

                Columns = new List {

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="sessionID",Visible=false, HeaderText="SessionID", Width="60",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="wyear",Visible=false, HeaderText="Wyear", Width="60",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="docType",Visible=false, HeaderText="DocType", Width="60", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="docNo",Visible=false, HeaderText="DocNo", Width="80",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="docLine", HeaderText="DocLine", Width="80",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="orderLine", HeaderText="OrderLine", Width="105",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="codeId", HeaderText="CodeId", Width="80",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="itemName", HeaderText="ItemName", Width="100",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="quantity", HeaderText="Quantity", Width="80",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="orderAmount", HeaderText="OrderAmount", Width="80",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },

                new Syncfusion.EJ2.Grids.GridColumn(){ Field="sellPriceWithVAT", HeaderText="SellPriceWithVAT", Width="80",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center },


            },

                ChildGrid = SecondChild

            };



                   

                   

                   

                       

                       

                       

                       

                       

                       

                       

                       

               


                   

                   

                   

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

               





5 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team April 15, 2021 11:33 AM UTC

Hi Tarik, 
 
Thanks for contacting Syncfusion support. 
 
Query: i am trying to save every SecondChildGrid edited row with external button, how can i do that? 
 
Based on your requirement, you want to save the edited records of all the second level hierarchy grid by single external button click. 
 
To achieve your requirement you need to get all the second level hierarchy grid elements from the DOM and need to execute the bachSave() method on each grid instances to perform the save action. Please refer to the below code example and sample for more information. 
 
 
    function btnclick(args) { 
// get all the second level hierarchy grid 
        var secondlevelGrids = document.querySelectorAll("#Grid .e-grid .e-grid") 
// #Grid – parent Grid id, 1st .e-grid – first level grid element class, 2nd .e-grid – second level grid element class 
        for (var i = 0; i < secondlevelGrids.length; i++) { 
// save the batch edited records in Grid 
            secondlevelGrids[i].ej2_instances[0].editModule.batchSave(); 
        } 
    } 
 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Marked as answer
TA Tarik April 15, 2021 12:52 PM UTC

i want to load my child grids dinamically and when i do that the BatchUrl do not work, i will post my javascript code for Load child and i want to know if there is some way to do the batchSave with dinamically load.

function OnLoadChild1(args) {
        var model = {
            DocNo: this.parentDetails.parentRowData.docNo,
            wYear: this.parentDetails.parentRowData.wyear,
            DocType: this.parentDetails.parentRowData.docType,
            sessionID: this.parentDetails.parentRowData.sessionID,
            DocLine: this.parentDetails.parentRowData.docLine
        }
        var ajax = new ejs.base.Ajax({
            type: "POST",
            url: '/Sales/getSaleOrderLines',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(model)
        });
        ajax.send().then(function (result) {
            var data = JSON.parse(result);
            this.dataSource = data;
        }.bind(this));
    }
    function OnLoadChild2(args) {
        obj.push(this);
        var model = {
            DocNo: this.parentDetails.parentRowData.docNo,
            wYear: this.parentDetails.parentRowData.wyear,
            DocType: this.parentDetails.parentRowData.docType,
            sessionID: this.parentDetails.parentRowData.sessionID,
            DocLine: this.parentDetails.parentRowData.docLine
        }
        //e.preventDefault();
        var ajax = new ejs.base.Ajax({
            type: "POST",
            url: '/Sales/getSaleOrderLines',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(model)
        });
        ajax.send().then(function (result) {
            var data = JSON.parse(result);
            this.dataSource = data;
        }.bind(this));
        //console.log(this.element.ej2_instances[0]);

RS Rajapandiyan Settu Syncfusion Team April 16, 2021 09:40 AM UTC

Hi Tarik, 
 
Thanks for your update. 
 
Query: I want to load my child grids dynamically and when i do that the BatchUrl do not work, if there is some way to do the batchSave with dinamically load. 
 
By analyzing your code example, we found that you have changed the childGrid’s dataSource with the JSON object in ajax success event. So, it work as a local dataSource and all the CRUD actions are performed at client side only. 
 
To achieve your requirement, we suggest you to bind the dataSource to the childGrids using dataManager with the dataAdaptor like below, 
 
 
 
    function OnLoadChild2(args) { 
        var ajax = new ejs.base.Ajax({ 
            type: "POST", 
            url: '/Home/getSaleOrderLines', 
            contentType: "application/json; charset=utf-8", 
        }); 
        ajax.send().then(function (result) { 
            var data = JSON.parse(result); 
// bind the dataSource using the dataManager with adaptor  
            this.dataSource = new ej.data.DataManager({ 
                json: data,  // bind the grid data 
                adaptor: new ej.data.RemoteSaveAdaptor(), 
                batchUrl: '/Home/BatchUpdate',   // bind the method for batch editing 
            }); 
        }.bind(this)); 
    } 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


TA Tarik April 16, 2021 11:50 AM UTC

That worked perfectly, i have one more question, how can i send one more parametar to my BatchUpdate method 

Controller.cs

public void BatchUpdate([FromBody]CRUDModel<Model> model,String ObjectId)
        {
            //do something
        }

RS Rajapandiyan Settu Syncfusion Team April 19, 2021 10:49 AM UTC

Hi Tarik, 

Thanks for your update. 
 
Query: how can i send one more parametar to my BatchUpdate method. 
 
We have validated your query at our end. You can achieve your requirement by including additional parameters to the ChildGrid’s query in its beforeBatchSave event. 
 
 
 
In that event, we send the multiple additional parameters in the childGrid’s query. Please find the below code example for more information. 
 
 
@{ 
    var SecondChild = new Syncfusion.EJ2.Grids.Grid() 
    { 
        DataSource = new Syncfusion.EJ2.DataManager() 
        { 
            Json = ViewBag.DataSource3.ToArray(), 
            BatchUrl = "/Home/BatchUpdate", 
            Adaptor = "RemoteSaveAdaptor" 
        }, 
        ----- 
        Toolbar = new List<string>() { "Add", "Edit", "Delete", "Update", "Delete" }, 
        Load = "OnLoadChild2", 
        BeforeBatchSave = "beforeBatchSaveChild2", 
        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 
                ---- 
                } 
    }; 
 
---- 
 
 
<script> 
    ----- 
 
    function beforeBatchSaveChild2(args) { 
        var value1 = ""; 
        var value2 = "" 
        if (args.batchChanges.changedRecords.length > 0) { 
            value1 = args.batchChanges.changedRecords[0].CustomerID 
            value2 = args.batchChanges.changedRecords[0].UnitID 
        } else if (args.batchChanges.addedRecords.length > 0) { 
            value1 = args.batchChanges.addedRecords[0].CustomerID 
            value2 = args.batchChanges.addedRecords[0].UnitID 
        } else { 
            value1 = args.batchChanges.deletedRecords[0].CustomerID; 
            value2 = args.batchChanges.deletedRecords[0].UnitID; 
        } 
 
        this.query.params = [] 
// send additional parameters to server side 
        this.query.addParams('CustomerID', value1); 
        this.query.addParams('UnitID', value2) 
 
    } 
</script> 
 
 
[HomeControllers.cs] 
 
        public IActionResult BatchUpdate([FromBody]CRUDModel batchmodel) 
        { 
            if (batchmodel.changed != null) 
            { 
                for (var i = 0; i < batchmodel.changed.Count(); i++) 
                { 
                    var ord = batchmodel.changed[i]; 
                    OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
                    val.OrderID = ord.OrderID; 
                    val.CustomerID = ord.CustomerID; 
                    val.EmployeeID = ord.EmployeeID; 
                    val.UnitID = ord.UnitID; 
                } 
            } 
 
            if (batchmodel.deleted != null) 
            { 
                for (var i = 0; i < batchmodel.deleted.Count(); i++) 
                { 
                    OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == batchmodel.deleted[i].OrderID).FirstOrDefault()); 
                } 
            } 
 
            if (batchmodel.added != null) 
            { 
                for (var i = 0; i < batchmodel.added.Count(); i++) 
                { 
                    OrdersDetails.GetAllRecords().Insert(0, batchmodel.added[i]); 
                } 
            } 
            var data = OrdersDetails.GetAllRecords().ToArray(); 
            return Json(new { added = batchmodel.added, changed = batchmodel.changed, deleted = batchmodel.deleted,action = batchmodel.action, key = batchmodel.key }); ; 
 
        } 
        public class CRUDModel 
        { 
            public List<OrdersDetails> added { get; set; } 
            public List<OrdersDetails> changed { get; set; } 
            public List<OrdersDetails> deleted { get; set; } 
            public string key { get; set; } 
            public string action { get; set; } 
 
            public ParamObject Params { get; set; }  // use paramObject to retrieve the additional parameters 
        } 
        public class ParamObject   // define the required field as you want 
        { 
            public int? UnitID { get; set; } 
            public string CustomerID { get; set; } 
        } 
 
 
Screenshot #1: Request to the server 
 
 
Screenshot #2: Get the request at server 
 
 
We have prepared a sample for your reference. You can get it from the below link. 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon