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

Threaded View

Previous Post Previous Post   Next Post Next Post
  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.

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