[OPEN] [#1578] [4.5.1] TreeGrid drag & drop is slow when store is filtered in Ext.Net 4.5.1
Hi Support,
After upgrading Ext.Net from 4.1 to 4.5.1, I see drag & drop is slow when store is filtered. I'm attaching sample to reproduce the issue. Try drag & drop before filtering any records and then try after filtering, you'll notice delay, that wasn't the case in earlier version (4.1)
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)
)
.View(
Html.X().TreeView()
.Plugins(
Html.X().TreeViewDragDrop().AllowLeafDrop(false).ContainerScroll(true)
//Html.X().TreeViewDragDrop().AppendOnly(true).ContainerScroll(true)
)
)
)
</div>
</body>
</html>
UPDATE:
So I added check so you can only re-arrange rows at the root level, I also enabled debug mode for script but didn't get any errors. what kind of errors you got?
Filter's logic we used is fairly simple, no complex calculation so can't optimize anymore. Is there any way we can disable the filter re-applying after every drop since i'm basically working on same filtered data? Is this new behavior is from underlying extjs or from Ext.Net?
