[OPEN] [#1580] [4.5.1] Drag & drop stop working when you have cell editing plugin

  1. #1

    [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:

      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
    @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>
    Last edited by Fahd; Mar 06, 2018 at 1:45 PM.
  2. #2
    Hello @Fahd!

    It seems your view code line 101 makes a runtime error on page load. This one should definitively trigger an error on your side if you run the code sample you provided. Would you mind reviewing this in your test case?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I've added missing js function, but it could have also worked if you had just commented that line(101) though.

    Thanks
  4. #4
    Hello @Fahd!

    Sorry for the trouble, we never know what's missing is the key to reproduce the issue. We'll take a look on the reviewed test case and let you know what can be done to have it working the way you need.

    By the way, if the line is not required to reproduce the issue, wouldn't we rather remove it than adding the missing js function?
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello @Fahd!

    Sorry for the delay! Simple workarounds may require lots of code analysis!

    I believe this is a bug. But as far as the fix is concerned, besides returning false from the BeforeEdit event, also delete the tree grid view's current action cursor. This action cursor prevents drag drop (for example, when you are editing, you don't want to move the text field around... which could be a check box or slider.

    So, your before edit handler could be just:

    l.BeforeEdit.Handler = "delete this.view.actionPosition; return false;"
    Another way to avoid this scenario would be just rely on dual-clicking to edit cells (which also prevents from accidental triggering of edits. Using a row editor would also be a way to avoid this issue (as while editing the row would be pinned by its 'update/cancel' handlers.

    I hope this helps for the time being, and thanks for reporting the issue! We've logged it under #1580 in our issues tracking system at github.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Thanks Fabricio,

    Deleting ActionPostion works for now.

Similar Threads

  1. [CLOSED] GridPanel RowEditor plugin, limiting editing to a single cell.
    By rmelancon in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 07, 2017, 6:56 PM
  2. Replies: 5
    Last Post: Sep 24, 2015, 12:28 PM
  3. Replies: 3
    Last Post: Oct 11, 2013, 10:28 PM
  4. [CLOSED] Gridpanel drag-drop with editablegrid plugin
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 07, 2013, 2:38 PM
  5. Replies: 0
    Last Post: Jun 28, 2013, 5:53 AM

Posting Permissions