Drag and Drop featue - How to save the row in destination?

[Guillermo Goberna]

Hello, 

I have a couple of grids, I want to move rows from one grid to the other one. (I have achived this). but I don't know how to trigger the insert method in the destination grid, so when I drop a row from the source grid, I save the row in the new table. The insert/update/remove methods works fine, but doesn't detect the dropped row.

What I'm missing? your documentation and demos doesn't explain this feature.

This is my code: (First grid is the destination grid).

<div class="row">

            <div class="col-sm-12">

            @Html.EJS().Grid("FormulaGrid").DataSource(dataManager =>

            {

                dataManager

                .InsertUrl("/Formulas/Insert")

                .UpdateUrl("/Formulas/Update")

                .RemoveUrl("/Formulas/Remove")

                .Json(ViewBag.DSformula)

                .Adaptor("RemoteSaveAdaptor");

            }).EditSettings(e => { e.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal).ShowDeleteConfirmDialog(true); }

                    ).AllowSelection(true).AllowRowDragAndDrop(true).RowDrop().Columns(col =>

                    {

                        col.Field("CodigoProducto").Visible(false).DefaultValue(Model.CodigoProducto).IsPrimaryKey(true).Add();

                        col.Field("CodigoProductoMP").HeaderText("RM Code")

                            .Template("<a target=\"_blank\" rel='nofollow' href=\"/Productos/Details/${CodigoProductoMP}\">${CodigoProductoMP}</a>")

                            .AllowEditing(false).Width("190").Add();

                        col.Field("Revision").Visible(false).Add();

                        col.Field("Variante").Visible(false).Add();

                        col.Field("NombreMP").HeaderText("Name").MinWidth(200).Add();

                        col.Field("Proveedor").HeaderText("Supplier").Add();

                        col.Field("Precio").HeaderText("Price").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).MaxWidth("30").Add();

                        col.Field("Cantidad").HeaderText("Quantity (%)").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

                        col.Field("UnidadMedida").Visible(false).Add();

                    }).Toolbar(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel" }).Aggregates(agg =>

                    {

                        agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() {

                            new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Cantidad", Format = "N5", Type = "Sum", FooterTemplate = "Sum: ${Sum}" },

                            new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Precio", Format = "C3", Type = "Sum", FooterTemplate = "Sum: ${Sum}" }

                        }).Add();

                    }).Render()

            </div>

        </div>

        <h3>Raw materials</h3>

        <div class="row">

            <div class="col-sm-8">

                @Html.EJS().Grid("ProductosFormulaGrid").DataSource(dataManager =>

             {

                 dataManager

                 .Json(ViewBag.DSmateriasPrimas)

                 .Adaptor("RemoteSaveAdaptor");

             }).EditSettings(e => { e.AllowAdding(false).AllowEditing(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Normal).ShowDeleteConfirmDialog(true); }

                     ).AllowSelection(true).AllowRowDragAndDrop(true).Columns(col =>

                     {

                         col.Field("CodigoProductoMP").HeaderText("RM Code")

                             .Template("<a target=\"_blank\" rel='nofollow' href=\"/Productos/Details/${CodigoProductoMP}\">${CodigoProductoMP}</a>")

                             .AllowEditing(false)

                             .IsPrimaryKey(true).Add();

                         col.Field("NombreMP").HeaderText("Name").MinWidth(200).Add();

                         col.Field("Proveedor").HeaderText("Supplier").Add();

                         col.Field("Precio").Visible(false).HeaderText("Price").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).MaxWidth("30").Add();

                     }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).AllowPaging().SelectionSettings(select=>select.Type( Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageCount(1).PageSize(10)).RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "FormulaGrid" }).AllowFiltering(true).Render()

            </div>

          </div>

Thank you very much.

[Seeni Sakthi Kumar Seeni Raj]

Hi Guillermo, 

Thanks for contacting Syncfusion support, 

We could see you would like to add the records to the destination Grid and delete the same in source Grid,  after dropping them to destination Grid.  

 

We have achieved the Insert action in destination Grid while drop a row from Source Grid using rowDrop event of Source Grid(ProductoForumlaGrid). In the below code example, we have added a drop row in the destination Grid(FormulaGrid) using “addRecord” method event that row remove from the source Grid using “deleteRecord” method in the rowDrop event. Please refer the below code example, sample and Documentation for more information. 

 

[Index.cshtml] 

@{ 

    ViewBag.Title = "Home Page"; 

} 

<h3><i>FORMULA GRID(Destination Grid)</i></h3> 

@Html.EJS().Grid("FormulaGrid").DataSource(ds => ds.Json(ViewBag.PFGridData).UpdateUrl("/Home/Update").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").Adaptor("RemoteSaveAdaptor")).Columns(col => 

{ 

    .    .    .     . 

}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowRowDragAndDrop().Render() 

 

<h3><i>PRODUCTO FORMULA GRID(Source Grid)</i></h3> 

 

@Html.EJS().Grid("ProductoForumlaGrid").DataSource(ds => ds.Json(ViewBag.dataSource).UpdateUrl("/Home/SrcUpdate").InsertUrl("/Home/SrcInsert").RemoveUrl("/Home/SrcRemove").Adaptor("RemoteSaveAdaptor")).Columns(col => 

{ 

.    .    .     . 

}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowRowDragAndDrop().RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "FormulaGrid" }).RowDrop("FormulaDropAction").Render() 

 

<script> 

 

    function FormulaDropAction(args) {         

        var DestGrid = document.getElementById("FormulaGrid").ej2_instances[0] 

        var SrcGrid = document.getElementById("ProductoForumlaGrid").ej2_instances[0]; 

        var idx = parseInt(args.target.getAttribute('index'));                 

        SrcGrid.deleteRecord("OrderID", args.data);   // Remove a drag element from the Source Grid 

        DestGrid.addRecord(args.data[0], DestGrid.currentViewData.length); // Added a drop row in the Destination Grid 

        args.cancel = true; 

    }  

   

</script> 

Sample link: https://www.syncfusion.com/downloads/support/forum/148170/ze/RemoteSaveAdaptor-MVC-RDD-902325175.zip 

Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/#addrecord 

https://ej2.syncfusion.com/documentation/api/grid/#deleterecord 

Please get back to us, if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S 

[Guillermo Goberna]

Thank you, the insert Works pretty fine, I have only a problem, and is that after inserting the row, the grid doesn't refresh until I press F5 or reload the website. 

I think the problem is related with the form (it is a header / lines form). 

I have upload two files, the full web code, and the insert/update/remove actions from the class. 

Update and Remove Works fine, and refresh the grid, but not the insert.

Thank you .

Attachment: Questions_d454abdd.zip

[Seeni Sakthi Kumar Seeni Raj]

Hi Guillermo,  

 

We have created a new support incident under your direct-trac account to validate further on this issue. Please login to following link and track the incident for better follow-up.  

 

https://www.syncfusion.com/support/directtrac/ 

 

Regards,  

Seeni Sakthi Kumar S