How do I add a BatchUrl in Syncfusion EJ2 Hierarchical Grid

[Ssekamatte James]

    function load(args) {

        var grid = document.getElementById('DataGrid').ej2_instances[0]

        //debugger;

        grid.childGrid = {

            dataSource: countrydata,

            queryString: 'DecisionID', 

          

            cellSaved: cellSaved,

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowUpdating: true, mode: 'Batch', showConfirmDialog: true },

            allowPaging: true,

            toolbar: ["Add", "Edit", "Update", "Cancel", "Delete"],

            pageSettings: { pageSize: 6, pageCount: 5 },

           

            

            columns: [

                { field: 'DecisionID', headerText: 'Decision ID', isPrimaryKey: true, isVisible: false, textAlign: 'Right', width: 120 },

                         

                {

                    field: 'CountryID', headerText: 'Partner state', width: 120, editType: 'dropdownedit', edit: {

                        params: {

                            //query: new Query(),

                            //dataSource: _partnerstate,

                            //fields: { value: 'id', text: 'country' },

                            //allowFiltering: true

                        }

                    }

                },

                { field: 'StatusComments', headerText: 'Status Comments', width: 120 },

                { field: 'ImplementationStatusNarrative', headerText: 'Implementation Status Narrative',width: 120 },

                //{ field: 'ImplementationStatusID', headerText: 'Implementation Status', width: 120 }

                 {

                     field: 'ImplementationStatusID', headerText: 'Implementation Status Narrative', width: 120, editType: 'dropdownedit', edit: {

                        params: {

                            //query: new Query(),

                            //dataSource: _impstatus,

                            //fields: { value: 'id', text: 'Status' },

                            //allowFiltering: true

                        }

                    }

                },

            ],

        }

    }

  

Above is my Function load which I use to load a ChildGrid on my Parent Grid, but it is in Batch Mode. My question is how do I add a BatchUrl to route to my controller method to save the changes .

NB: I am using Syncfusion EJ2

[Rajapandiyan Settu]

Hi James, 

Greetings from syncfusion support. 

Query : how do I add a BatchUrl to route to my controller method to save the changes . 

 

Based on your query we could see that you need to use batchUrl to perform CRUD operation for child grid data. We prepared a sample with this requirement, in that we have used batchUrl for both master and child grid. please refer the below code example and sample for more information. 

 

 

<ejs-grid id="DataGrid" allowPaging="true" load="load"  actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

    <e-data-manager url="/Home/UrlDatasource" batchUrl="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch" showConfirmDialog="false"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" width="130" textAlign="Right"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

 

    function load(args) { 

        var grid = document.getElementById('DataGrid').ej2_instances[0] 

        grid.childGrid = { 

            dataSource: new ej.data.DataManager({ 

                url: "/Home/UrlDatasourceChild", 

                batchUrl: "/Home/BatchUpdateChild", 

                adaptor: new ej.data.UrlAdaptor()  

            }), 

 

            queryString: 'EmployeeID', 

 

            cellSaved: cellSaved, 

            beforeBatchSave: beforeBatchSave, 

 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowUpdating: true, mode: 'Batch', showConfirmDialog: true }, 

            allowPaging: true, 

            toolbar: ["Add", "Edit", "Update", "Cancel", "Delete"], 

            pageSettings: { pageSize: 6, pageCount: 5 }, 

 

 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, isVisible: false, textAlign: 'Right', width: 120 }, 

                { field: 'ShipName', headerText: 'Ship Name', width: 120, editType: 'dropdownedit'}, 

                { field: 'ShipCountry', headerText: 'Ship Country', width: 120 }, 

            ], 

        } 

    } 

    function beforeBatchSave(args) { 

        for (var i = 0; i < args.batchChanges.addedRecords.length; i++) { 

            // `parentKeyFieldValue` refers to the queryString field value of the parent record. 

            args.batchChanges.addedRecords[i][this.queryString] = this.parentDetails.parentKeyFieldValue;  // maintain the querystring in the added record by setting the query string value as parentKeyFieldValue 

        } 

    } 

</script> 

 

Controller.ts 

 

public IActionResult BatchUpdateChild([FromBody]CRUDModelChild batchmodel) 

        { 

            var childData = BigData.GetAllRecords().ToList(); 

            if (batchmodel.Changed != null) 

            { 

                for (var i = 0; i < batchmodel.Changed.Count(); i++) 

                { 

                    var ord = batchmodel.Changed[i]; 

                    BigData val = BigData.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

                    val.OrderID = ord.OrderID; 

                    val.EmployeeID = ord.EmployeeID; 

                    val.ShipName = ord.ShipName; 

                    val.ShipCountry = ord.ShipCountry; 

                } 

            } 

 

            if (batchmodel.Deleted != null) 

            { 

                for (var i = 0; i < batchmodel.Deleted.Count(); i++) 

                { 

                    BigData.GetAllRecords().Remove(childData.Where(or => or.OrderID == batchmodel.Deleted[i].OrderID).FirstOrDefault()); 

                } 

            } 

 

            if (batchmodel.Added != null) 

            { 

                for (var i = 0; i < batchmodel.Added.Count(); i++) 

                { 

                    BigData.GetAllRecords().Insert(0, batchmodel.Added[i]); 

                } 

            } 

            var data = BigData.GetAllRecords().ToList(); 

            return Json(BigData.GetAllRecords()); 

 

        } 

  

Sample : https://www.syncfusion.com/downloads/support/forum/154973/ze/UrlAdaptor-CRUD-BatchMode_(2)-1084947353.zip 

UG : https://ej2.syncfusion.com/documentation/grid/hierarchy-grid/?no-cache=1#adding-record-in-childgrid 

Please get back to us if you need further assistance on this. 

  

Regards, 

Rajapandiyan S 

[Ssekamatte James]

Thank You Syncfusion Support. This worked perfectly well.

[Rajapandiyan Settu]

Hi James, 

We are glad that the provided solution resolved your requirement. 

Regards, 

Rajapandiyan S