EJ2 Grid Reorder Rows with update to Server

[Stephan Schrade]

Hi support,

I'm using the grid with the DataManager to Save and Update the elements of the grid.

This works very good.

Now I want to use the feature allowRowDragAndDrop.
How can I update the data to the server with the DataManager?

The batchURL is not triggerd and also no other url I have defined in the DataManager.

Regards,
Stephan

[Ajith Govarthan]

Hi Stephan, 

Thanks for contacting Syncfusion support. 

Query: Now I want to use the feature allowRowDragAndDrop. 

 

By default in EJ2 Grid we do not have the server-side support for the Row Drag and Drop feature. To perform server-side row drag and drop operation in Grid, we suggest you to use the rowDrop event of EJ2 Grid.  

In rowDrop event we have stopped the row drag and drop operation in client side by defining args.cancel as true and using ajax post we have perform the reordering in server side based on the rowDrop event arguments(from and drop index).  

Using rowDrop event arguments in server side we swap the data and refresh the grid to achieve your requirement. 

Please refer the below code example for more information. 

index.js 

 

<script type="text/javascript"> 

    document.addEventListener('DOMContentLoaded', function () { 

    var grid = new ej.grids.Grid({ 

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

        allowPaging: true, 

        pageSettings: { pageCount: 5 }, 

        allowRowDragAndDrop: true, 

 

        rowDrop: function (args) { 

            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

        args.cancel = true; 

        let ajax = new ej.base.Ajax(); 

        ajax.type = "POST" 

        ajax.url = "Home/Move" 

        let moveposition = { oldIndex: args.fromIndex, data: args.data, newIndex: args.dropIndex }; 

        ajax.data = JSON.stringify(moveposition); 

        ajax.send(); 

        ajax.onSuccess = () => { 

            grid.refresh();  // refresh the grid 

        } 

 

        }, 

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

        load: function () { 

            let data = new ej.data.DataManager({ url: "/Home/UrlDatasource", batchUrl: "/Home/BatchUpdate", adaptor: new ej.data.UrlAdaptor }); 

             

            grid.dataSource = data; 

        }, 

        allowPaging: true, 

        columns: [ 

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

            { 

                field: 'EmployeeID', width: 140, headerText: 'Employee ID' 

            }, 

            { field: 'ShipCity', headerText: 'Ship Country', width: 140 } 

        ] 

    }); 

        grid.appendTo('#Grid'); 

                

    }); 

</script> 

Server side: 

  public void move(values data) 

        { 

          // swap the data in the dataSource. 

        } 

Query: How can I update the data to the server with the DataManager? The batchURL is not triggerd and also no other url I have defined in the DataManager. 

Based on your query you have mentioned that batchUrl method is not getting triggered. Based on that we have prepared sample in that we have used batch editing and also handled the batchUrl actions in the server side. For your convenience we have attached sample so please refer the sample for your reference. 

Code Example: 

index.js 

<script type="text/javascript"> 

    document.addEventListener('DOMContentLoaded', function () { 

    var grid = new ej.grids.Grid({ 

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

        allowPaging: true, 

        pageSettings: { pageCount: 5 }, 

        beforeBatchSave: function (args) { 

                grid.query = new ej.data.Query().addParams("ej2Grid", "true"); 

        }, 

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

        load: function () { 

            let data = new ej.data.DataManager({ url: "/Home/UrlDatasource", batchUrl: "/Home/BatchUpdate", adaptor: new ej.data.UrlAdaptor }); 

             

            grid.dataSource = data; 

        }, 

        allowPaging: true, 

        columns: [ 

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

            { 

                field: 'EmployeeID', width: 140, headerText: 'Employee ID' 

            }, 

            { field: 'ShipCity', headerText: 'Ship Country', width: 140 } 

        ] 

    }); 

        grid.appendTo('#Grid'); 

                

    }); 

</script> 

HomeController.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]; 

                    Orders val = order.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

                    val.OrderID = ord.OrderID; 

                    val.EmployeeID = ord.EmployeeID; 

                    val.CustomerID = ord.CustomerID; 

                    val.ShipCity = ord.ShipCity; 

                } 

            } 

 

            if (batchmodel.Deleted != null) 

            { 

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

                { 

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

                } 

            } 

 

            if (batchmodel.Added != null) 

            { 

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

                { 

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

                } 

            } 

            var data = order.ToList(); 

            return Json(data); 

 

        } 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UrlAdaptor-CRUD-BatchMode1826360266_(2)-130649315.zip 

To find out the root cause of an issue, we need the following details 

1. Share the complete grid rendering code. 

2. If possible please replicate the issue in the attached sample. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.