We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148170 Oct 8,2019 11:49 PM UTC Oct 17,2019 10:45 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Guillermo Goberna
Asked On October 8, 2019 11:49 PM UTC

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 [Syncfusion]
Replied On October 9, 2019 08:54 AM UTC

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> 




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

Regards, 
Seeni Sakthi Kumar S 


Guillermo Goberna
Replied On October 16, 2019 05:57 AM UTC

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 [Syncfusion]
Replied On October 17, 2019 10:45 AM UTC

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.  
 
 
Regards,  
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon