Update row after drag and drop

[Carlos]

Hi:
I am having a problem when I drag a row within the same grid. After dragging and dropping the row, I try to update the data in that row, and the change occurs in the data in the row that took its place. How can i fix this?. The edit mode on the grid is "batch" .Datasource(ds => ds.URL(@Url.Action("LineasDetalleDataSource")).BatchURL(@Url.Action("LineasDetalleBatchUpdate")).Adaptor(AdaptorType.UrlAdaptor)) Thank you in advance.

[Manivannan Padmanaban]

Hi Carlos, 

Greetings from Syncfusion Support. 

From the shared query we are able to understand that after you updated the dropped row data, the row placed in its old position instead of new dropped position. The reported problem will occur because the records are presented in their  

initial position in the dataSource since you are using the remote data. To avoid this, we suggest you to change the record position in the server side and update the dropped row data in the actionComplete event. 

Refer to the below code example, 

@(Html.EJ().Grid<object>("Editing") 

………………………………. 

        .RowDropSettings(drop => drop.RowDropMapper("RowDropHandler")) 

        .ClientSideEvents(e => e.RowDrop("DropAction").ActionComplete("Complete")) 

…………………………….. 

        .AllowPaging() 

        .Columns(col => 

        { 

            ………………. 

        })) 

<script> 

    var dropData; // declare a global variable. 

    function DropAction(args) { 

        dropData = args.data[0]; // store the dropped data in global variable. 

    } 

  

    function Complete(args) { 

        if (args.action == 'rowReordering') { 

            dropData.CustomerID = 'test'; // update the dropData here. 

            this.updateRecord('OrderID', dropData);  

        }  

    } 

</script> 

 

// Controller page 

 

public ActionResult RowDropHandler(List<Order> changed){        JavaScriptSerializer ser = new JavaScriptSerializer();        RowDropModel dropDetails = (RowDropModel)ser.Deserialize(Request.Headers["rowDropDetails"], typeof(RowDropModel));        var count = 0;        var srcData = orddata;        if (changed != null)        {                 foreach (var item in changed)                 {                         Order result = srcData.Where(o => o.OrderID == item.OrderID).FirstOrDefault();                         srcData.Remove(result); // remove the data from its old position.                         srcData.Insert(dropDetails.DestinationRowIndex, result); // insert the data to its new position.                         count++;                 }        }        return Json("success", JsonRequestBehavior.AllowGet);}

 

 

Also, refer to the below API documentation links. 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

https://help.syncfusion.com/api/js/ejgrid#events:rowdrop 

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

https://help.syncfusion.com/api/js/ejgrid#members:rowdropsettings 

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban