[OPEN] [#1580] [4.5.1] Drag & drop stop working when you have cell editing plugin
Hi Support,
After upgrading Ext.Net 4.1 to 4.5.1, drag & drop stop working when you have editable cell. Here is the scenario to reproduce the issue.
Click on cell which is editable but has BeforeEdit event that return false based on some condition (In sample code it returns false all the time for simplicity). Now you can't drag record if you initiated drag from this cell. Drag works from other cell of the same record though.
Sample
Controller:
Code:
public class TestController : Controller
{
public ActionResult Index()
{
return View();
}
public StoreResult GetNodes(int node)
{
NodeCollection nodes = new Ext.Net.NodeCollection();
if (node == 0)
{
for (int i = 1; i < 50; i++)
{
Node asyncNode = new Node();
asyncNode.Text = i.ToString();
asyncNode.NodeID = i.ToString();
asyncNode.CustomAttributes.Add(new ConfigItem("task", "Task_" + i));
asyncNode.CustomAttributes.Add(new ConfigItem("user", "User_" + i));
asyncNode.CustomAttributes.Add(new ConfigItem("duration", "11.6"));
asyncNode.CustomAttributes.Add(new ConfigItem("done", "True"));
nodes.Add(asyncNode);
}
}
else
{
for (int i = 0; i < 6; i++)
{
Node treeNode = new Node();
treeNode.Text = node + i.ToString();
treeNode.NodeID = node + i.ToString();
treeNode.Leaf = true;
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "task", Value = "Sub_Task_" + node.ToString() + i });
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "user", Value = "User_" + node + i });
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "duration", Value = "11.6" });
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "done", Value = "True" });
nodes.Add(treeNode);
}
}
return this.Store(nodes);
}
}
View
Code:
@using ScriptMode = Ext.Net.ScriptMode
@{
ViewBag.Title = "Index";
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>TreeGrid</title>
@Html.X().ResourceManager().ScriptMode(ScriptMode.Debug)
<script>
var formatHours = function(v) {
if (v < 1) {
return Math.round(v * 60) + " mins";
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + "h " + Math.round(min * 60) + "m";
} else {
return v + " hour" + (v === 1 ? "" : "s");
}
};
var handler = function(grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
};
var filterTreeGrid = function(filter) {
var grid = App.tgProjects;
grid.store.clearFilter();
grid.store.filter({
filterFn: function(record) {
var isEven = (record.data.index % 2) == true;
return filter == 'even' ? isEven : !isEven;
}
});
}
function nodeDragOver(targetNode, position, dragData) {
debugger;
if (position == 'after' || position == 'before') {
var rec = dragData.records[0];
var sourceParentId = rec.data.parentId;
var targetParentId = targetNode.data.parentId;
// Move only root's child
if (sourceParentId == '0' && targetParentId == '0') {
return true;
}
}
return false;
};
</script>
</head>
<body>
<div>
<br/>
@(
X.TreePanel().ID("tgProjects")
.Title("Core Team Projects")
.Width(900)
.Height(700)
.RootVisible(false)
.MultiSelect(true)
.SingleExpand(true)
.RowLines(true)
.ColumnLines(true)
.FolderSort(false)
//.BufferedRenderer(false)
.TopBarItem(
X.Button().Text("Odd rows").Handler("filterTreeGrid('odd');").Icon(Icon.Add),
X.Button().Text("Even rows").Handler("filterTreeGrid('even');").Icon(Icon.Add)
)
.Store(
Html.X().TreeStore().ID("treeGridStore")
.Proxy(
Html.X().AjaxProxy().Url(Url.Action("GetNodes"))
)
.Model(Html.X().Model()
.Fields(
X.ModelField().Name("task"),
X.ModelField().Name("user"),
X.ModelField().Name("duration"),
X.ModelField().Name("done").Type(ModelFieldType.Boolean)
)
)
)
.ColumnModel(
X.TreeColumn().Text("Task").Flex(1).DataIndex("task"),
X.TemplateColumn().Text("Duration").Flex(1).DataIndex("duration")
.Template(t =>
{
t.Html = "{duration:this.formatHours}";
t.Functions.Add(new JFunction
{
Name = "formatHours",
Fn = "formatHours"
});
}),
X.Column().Text("Assigned To").Flex(1).DataIndex("user").Editor(X.TextField().AllowBlank(false)),
X.Column().Text("Assigned BY").Flex(1).Editor(X.TextField().AllowBlank(true)),
X.CheckColumn().Text("Done").DataIndex("done").Flex(1).Editable(true).StopSelection(false)
)
.Root(
Html.X().Node().NodeID("0").Text("Root")
)
.Listeners(l => l.NodeDragOver.Fn = "nodeDragOver")
.Plugins(
X.CellEditing().ClicksToEdit(1).Listeners(l => { l.BeforeEdit.Handler = "return false;"; })
)
.View(
Html.X().TreeView()
.Plugins(
Html.X().TreeViewDragDrop().AllowLeafDrop(false).ContainerScroll(true)
)
)
)
</div>
</body>
</html>
