[CLOSED] Drag and Drop from grid to grid - cancel data transfer operation
Hello support team,
I have bidirectional dragging from one grid to another. The first grid contains all the companies, the second one only favourites. Since for favourites we need only to show the Name, the model is different on both grids:
Code:
@using Ext.Net;
@using Ext.Net.MVC;
@{
ViewBag.Title = "Grid Drag & Drop";
Layout = null;
var X = Html.X();
var ModelC = new object[]
{
new object[] { "3m Co", "9/1 12:00am" },
new object[] { "Alcoa Inc", "9/1 12:00am" },
new object[] { "Altria Group Inc", "9/1 12:00am" },
new object[] { "American Express Company", "9/1 12:00am" },
new object[] { "AT&T Inc.", "9/1 12:00am" },
new object[] { "Boeing Co.", "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", "9/1 12:00am" }
};
var ModelF = new object[]
{
new object[] { "3m Co" },
new object[] { "Boeing Co." },
};
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Test Case</title>
</head>
<body>
@(X.ResourceManager())
@X.DisplayField().ID("version").ReadOnly(true).Margin(10).Width(200)
@(X.Panel().Width(500).Height(300)
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items(
X.GridPanel().ItemID("grdCompanies").Flex(2)
.Title("All Companies")
.Padding(5)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("company"),
new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
)
)
.DataSource(ModelC)
)
.ColumnModel(
Html.X().Column().Text("Company").DataIndex("company").Flex(1),
Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange").Width(90)
)
.View(
X.GridView()
.Plugins(X.GridDragDrop().DragGroup("ddGroupAllCompanies").DropGroup("ddGroupFavourites").Copy(true))
.Listeners(l =>
{
l.BeforeDrop.Handler = "console.log('BEFORE_DROP', data.records[0].id); return 0;";
})
),
X.GridPanel().ItemID("grdFavourites").Flex(1)
.Title("Favourites")
.Padding(5)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("company")
)
)
.DataSource(ModelF)
)
.ColumnModel(
Html.X().Column().Text("Company").DataIndex("company").Flex(1)
)
.View(
X.GridView()
.Plugins(X.GridDragDrop().DragGroup("ddGroupFavourites").DropGroup("ddGroupAllCompanies"))
.Listeners(l =>
{
l.BeforeDrop.Handler = "console.log('BEFORE_DROP', data.records[0].id)";
})
)
)
)
</body>
</html>
<script type="text/javascript">
Ext.onReady(function () {
Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
});
</script>
What I want to achieve is this:
1. Drag and drop from companies to favourites: keep a record in company list and insert it into favourites - this can be done with the Copy(true) setting on the first grid.
2. Drag and drop from favourites to companies: remove a record from favourites, but do not insert in the company list (cancel data transfer operation when dropped) - according to the documentation, this should be achieved by returning 0 from the BeforeDrop event handler:
Returning 0 signals that the data transfer operation should not take place, but that the gesture was valid, and that the repair operation should not take place.
But that doesn't seem to work. Point 1 scenario works well, but moving records back causes two situations on company grid:
A. If the record is dragged from companies to favourites and immediately back to companies, the record is not inserted because it keeps the same id and the record is only placed at the drop position.
B. If a preloaded favourite is moved to companies, it is inserted a second time because id does not match the record id of the related company.
Did I misunderstand how the BeforeDrop event works or is it a bug? How to achieve the behavior described above?
Thank you for your help.
Ext JS 6.5.1.345 / Ext.NET 4.4.1
Kind regards
Dan
