dropMapper not trigger the action to the controller

Question

Hi guys!!I have a ejGrid wich not trigger the event rowDropSettings -> dropMapper, the code is: e.detailsElement.find("#detailGrid").ejGrid({ dataSource: json.result, allowSelection: true, allowTextWrap: true, allowSorting:true, allowRowDragAndDrop: true, editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, showConfirmDialog: true }, toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Cancel] }, rowDropSettings: { dropMapper:"FactoresCosteo/ReordenarRegistros", dragBehavior: ej.Grid.DragBehavior.Move }, endEdit: function (args) { $.ajax({ method: "POST", url: '@Url.Action("ActualizarRegistro", "FactoresCosteo")/' + '?factorDeCosteoId=' + factorDeCosteoId, data: args.data, }).done(function (json) { //console.log(json); if (json[0]['Value'] != undefined) { alert(json[1]['Value']); } }); }, actionBegin: function (args) { //console.log(args); if (args.requestType == "delete") { var gridObj = $("#gridTab" + factorDeCosteoId).find(".detailGrid").data("ejGrid"); //console.log(gridObj); $.ajax({ method: "POST", url: '@Url.Action("EliminarRegistro", "FactoresCosteo")/' + '?factorDeCosteoId=' + factorDeCosteoId, data: args.data, }).done(function (json) { //console.log(json); if (json[0]['Value'] != undefined) { alert(json[1]['Value']); } else { gridObj.deleteRecord("RegistroId", { Grupo: args.data.Grupo, RegistroId: args.data.RegistroId, Nombre: args.data.Nombre, Descripcion: args.data.Descripcion, Value: args.data.Value, Formula: args.data.Formula, IsFormula: args.data.IsFormula }); } }); } }, columns: [ { field: "RegistroId", isPrimaryKey:true, visible: false, headerText: "Grupo", width: 80, textAlign: ej.TextAlign.Right }, { field: "Grupo", headerText: "Grupo", width: 80, textAlign: ej.TextAlign.Right }, { field: "Nombre", headerText: 'Nombre', width: 80, textAlign: ej.TextAlign.Left }, { field: "Descripcion", headerText: 'Descripción', width: 120, textAlign: ej.TextAlign.Left }, { field: "Value", headerText: 'Valor', width: 80, textAlign: ej.TextAlign.Left }, { field: "Formula", headerText: 'Formula', width: 150, textAlign: ej.TextAlign.Left }, { field: "isFormula", visible:false, headerText: '¿Es Formula?', width: 120, textAlign: ej.TextAlign.Left }, ] });On the side of the ejGrid I can Drag and Drop the rows, but never is called that controller/action (FactoresCosteo/ReordenarRegistros): rowDropSettings: { dropMapper:"FactoresCosteo/ReordenarRegistros", dragBehavior: ej.Grid.DragBehavior.Move },The controller part is this, right now I dont have much functionality I am testing how it works and the data passed, but if I put a pause on this action, it never get there...public ActionResult ReordenarRegistros(List added, List deleted) { JavaScriptSerializer ser = new JavaScriptSerializer(); RowDropModel dropDetails = (RowDropModel)ser.Deserialize(Request.Headers["rowDropDetails"], typeof(RowDropModel)); var count = 0; return Json("success", JsonRequestBehavior.AllowGet); }Thanks in advance

Prasanna Kumar Viswanathan · Answer

Hi Benjamin, 

Thanks for contacting Syncfusion support. 

The dropMapper property works only for the remoteData. From the given code example we found that you have used the local data. So, to make use of the dropMapper we suggest you to use the remoteSaveAdaptor since you are using the JSON data. 

Please refer the below code example. 






$(function () { 
 
        var data = { 
            json: window.gridData, adaptor: new ej.remoteSaveAdaptor() 
        } 
 
        $("#Grid").ejGrid({ 
            dataSource: data, 
            allowSelection: true, 
            allowTextWrap: true, 
            allowPaging:true, 
            allowSorting: true, 
            actionComplete:"complete", 
            allowRowDragAndDrop: true, 
            editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, showConfirmDialog: true }, 
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Cancel] }, 
            rowDropSettings: { dropMapper: "/Home/Data", dragBehavior: ej.Grid.DragBehavior.Move }, 
 
        columns: [ 
                { field: "OrderID", isPrimaryKey: true, visible: true, headerText: "OrderID", width: 80, textAlign: ej.TextAlign.Right }, 
                { field: "CustomerID", headerText: "Grupo", width: 80, textAlign: ej.TextAlign.Right }, 
                { field: "EmployeeID", headerText: 'Nombre', width: 80, textAlign: ej.TextAlign.Left }, 
                { field: "ShipCity", headerText: 'Descripción', width: 120, textAlign: ej.TextAlign.Left }, 
                { field: "Freight", headerText: 'Valor', width: 80, textAlign: ej.TextAlign.Left }, 
                { field: "ShipCountry", headerText: 'ShipCountry', width: 150, textAlign: ej.TextAlign.Left }, 
            ] 
        }); 



Please refer the below documentation for details of remoteSaveAdaptor. 

https://help.syncfusion.com/js/datamanager/data-adaptors#remotesave-adaptor  

Regards, 
Prasanna Kumar N.S.V

Benjamín Rivero Cruz · Answer

Thank you Prasanna Kumar Viswanathan ... I will do the adjustment and try.

Also have 2 more questions about this thread:

1. How can I get the new order of the row... I want to persist this on the database. Inspecting your demo of drag and drop I check that the only data passed is the row that was dragged, but I dont know how get the new position. Some advice? thanks

2. Also I get some strange behavior of the grid when I drag and drop... Sometimes when the row is dropped, this row is duplicated... and sometimes is not moved... I try with diferent versions of jQuery and have a very weird behavior. Sometimes only allow drag and drop elements from bottom to up, but not elements from up to bottom... I will put a link to a video where you can see this...

The link to the video is: https://youtu.be/rdo5GcPcRKk

In this video you could see a mvc project with one ejGrid each row of this first grid has a child grid that is created on the fly with ajax... the child grid has the functionality of drag and drop enabled, but when I make the drag and drop as you can see on the video the rows dont stay on the dropped order... Also I Open on the end the example of your page and inspect the event dropMapper wich triggers an ajax post to another url, but the only data that I see passed is the row that was dragged, I want to know if is posible get the new order, position, index, or something for persist this new order on Database.

Benjamín Rivero Cruz · Answer

Prasanna Kumar Viswanathan, also i try your suggestion and now it works, the ajax request is triggered, but I have a problem on this line on the side of the controller:

RowDropModel dropDetails = (RowDropModel)ser.Deserialize(Request.Headers["rowDropDetails"], typeof(RowDropModel));

The error says: The value cannot be null, parameter name: input

I check the Request.Headers and there's no header called "rowDropDetails".

I also check your web example and this header value is passed like this:

rowDropDetails: 

{"sourceID":"Grid","destinationID":"Grid","destinationRowIndex":5}

But in my code that header is not passed.

Benjamín Rivero Cruz · Answer

Me again, I figure how pass header rowDropDetails...

On my Javascript I change this line:

dataSource: data,

for this:

dataSource: ej.DataManager(data),

Thanks in advance... also whit this rowDropDetails I get the response of my other questions...

1.- I can take the info of the object dropped from the post, and the index from this rowDropDetails

rowDropDetails: 

{"sourceID":"Grid","destinationID":"Grid","destinationRowIndex":5}

2.- The strange issues showed on the video dissapear suddenly, maybe this have related to the wrong configuration of the code. Now I can drag and drop correctly in any way.

My functionality is not finished by now, but is a great advance. Thanks for point me to the right direction.

Prasanna Kumar Viswanathan · Answer

Hi Benjamin, 
 
Thanks for the update. 
 
Please get back to us if you face any issues while achieving your requirement. 
 
Regards, 
Prasanna Kumar N.S.V