[CLOSED] Drag and drop broken from 2.5 to 4.1

  1. #1

    [CLOSED] Drag and drop broken from 2.5 to 4.1

    Still waiting for the Premium activation. Please move this thread to the 4.x Premium Help.

    The sample below works in EXT.NET 2.5, but not in 4.1.

    <head runat="server">
       <title></title>
       <script type="text/javascript">
          function InitializeImportDrop(v)
          {
             var gridView = v,
                 grid = gridView.up('gridpanel');
    
             grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
    
                getTargetFromEvent: function (e)
                {
                   return e.getTarget('.import-target');
                },
    
                onNodeEnter: function (target, dd, e, data)
                {
                   Ext.fly(target).addCls('import-target-hover');
                },
    
                onNodeOut: function (target, dd, e, data)
                {
                   Ext.fly(target).removeCls('import-target-hover');
                },
    
                onNodeOver: function (target, dd, e, data)
                {
                   return Ext.dd.DropZone.prototype.dropAllowed;
                },
    
                onNodeDrop: function (target, dd, e, data)
                {
                   var rowBody = Ext.fly(target).findParent('.x-grid-row', null, false),
                                   h = gridView.getRecord(rowBody),
                                   targetEl = Ext.get(target);
    
                   h.set('Source', data.sourceData.Description);
                   h.set('SourceOrder', data.sourceData.Order);
                   h.commit();
                   targetEl.update(data.sourceData.Description);
                   return true;
                }
             });
          }
    
          function InitializeSourceDrag(v)
          {
             v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
                getDragData: function (e)
                {
                   var sourceEl = e.getTarget(v.itemSelector, 10), d;
                   if (sourceEl)
                   {
                      d = sourceEl.cloneNode(true);
                      d.id = Ext.id();
                      return v.dragData = {
                         sourceEl: sourceEl,
                         repairXY: Ext.fly(sourceEl).getXY(),
                         ddel: d,
                         sourceData: v.getRecord(sourceEl).data
                      };
                   }
                },
                onInitDrag: function (e)
                {
                   this.dragData.ddel.innerHTML = this.dragData.sourceData.Description;
                   this.proxy.update(this.dragData.ddel);
                },
                getRepairXY: function ()
                {
                   return this.dragData.repairXY;
                }
             });
          }
    
          function ClearLinks(v)
          {
             var store = v.getStore();
             store.each(function (rec) { rec.set('Source', ''); rec.set('SourceOrder', -1); rec.commit(); });
          }
    
          var setExtraOptionsState = function (grid, command, record, row)
          {
    
             if (record.data.HasExtraOptions == false)
             {
                command.hidden = true;
             }
          }
       </script>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.storeImportFields.DataSource = this.Data;
                this.storeImportFields.DataBind();
    
                this.storeSourceFields.DataSource = this.Data2;
                this.storeSourceFields.DataBind();           
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { 1, "3m Co", false, "", -1 },
                    new object[] { 2, "Alcoa Inc", false, "", -1 },
                    new object[] { 3, "Altria Group Inc", false, "", -1 },
                    new object[] { 4, "American Express Company", false, "", -1 }
                };
            }
        }
    
        private object[] Data2
        {
           get
           {
              return new object[]
                {
                    new object[] { 0, "Books" },
                    new object[] { 1, "DVDs" },
                    new object[] { 2, "Cars" }
                };
           }
        }    
    </script>
    </head>
    <body>
       <form id="form1" runat="server">
          <ext:ResourceManager runat="server" ID="testRM" />
    
          <ext:Viewport runat="server" ID="viewPort1" Layout="BorderLayout">
             <Items>
                <ext:Panel runat="server" ID="panelLink" Layout="HBoxLayout" Width="1200" Title="Link fields">
                   <LayoutConfig>
                      <ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
                   </LayoutConfig>
                   <Items>
                      <ext:GridPanel ID="gridImportFields" runat="server" Height="600" Width="500" Padding="5" EnableColumnHide="false" EnableColumnMove="false" EnableColumnResize="false" SortableColumns="false">
                         <Store>
                            <ext:Store ID="storeImportFields" runat="server">
                               <Model>
                                  <ext:Model ID="modelImportFields" runat="server" IDProperty="ID">
                                     <Fields>
                                        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
                                        <ext:ModelField Name="Description" Type="String"></ext:ModelField>
                                        <ext:ModelField Name="HasExtraOptions" Type="Boolean"></ext:ModelField>
                                        <ext:ModelField Name="Source" Type="String"></ext:ModelField>
                                        <ext:ModelField Name="SourceOrder" Type="Int"></ext:ModelField>
                                     </Fields>
                                  </ext:Model>
                               </Model>
                            </ext:Store>
                         </Store>
                         <ColumnModel>
                            <Columns>
                               <ext:Column ID="columnImportID" runat="server" DataIndex="ID" Hidden="true"></ext:Column>
                               <ext:Column ID="columnImportDescription" runat="server" Text="Import field" DataIndex="Description" Flex="1"></ext:Column>
                               <ext:Column ID="columnImportSource" runat="server" Text="Source field" DataIndex="Source" Flex="1" TdCls="import-target"></ext:Column>
                               <ext:Column ID="columnImportSourceOrder" runat="server" DataIndex="SourceOrder" Hidden="true"></ext:Column>
                               <ext:ImageCommandColumn ID="columnExtraOptions" runat="server" Width="25px">
                                  <PrepareCommand Fn="setExtraOptionsState"></PrepareCommand>
                                  <Commands>
                                     <ext:ImageCommand CommandName="ShowExtraOptions" Icon="ApplicationEdit"></ext:ImageCommand>
                                  </Commands>
                                  <Listeners>
                                     <Command Handler="App.direct.ShowWindow( record.data.ID);"></Command>
                                  </Listeners>
                               </ext:ImageCommandColumn>
                            </Columns>
                         </ColumnModel>
                         <View>
                            <ext:GridView runat="server" ID="gridViewImportFields" LoadMask="false">
                               <Listeners>
                                  <Render Handler="InitializeImportDrop(this);"></Render>
                               </Listeners>
                            </ext:GridView>
                         </View>
                      </ext:GridPanel>
                      <ext:Panel runat="server" ID="panelClear" Layout="HBoxLayout" Border="false">
                         <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Middle" Pack="Center"></ext:HBoxLayoutConfig>
                         </LayoutConfig>
                         <Items>
                            <ext:Button ID="btnClearLinks" runat="server" Text="Clear">
                               <Listeners>
                                  <Click Handler="ClearLinks(#{gridImportFields});"></Click>
                               </Listeners>
                            </ext:Button>
                         </Items>
                      </ext:Panel>
                      <ext:GridPanel ID="gridSourceFields" runat="server" Height="600" Width="500" Padding="5" EnableColumnHide="false" EnableColumnMove="false" EnableColumnResize="false">
                         <Store>
                            <ext:Store ID="storeSourceFields" runat="server">
                               <Model>
                                  <ext:Model ID="modelSourceFields" runat="server" IDProperty="Order">
                                     <Fields>
                                        <ext:ModelField Name="Order" Type="Int"></ext:ModelField>
                                        <ext:ModelField Name="Description" Type="String"></ext:ModelField>
                                     </Fields>
                                  </ext:Model>
                               </Model>
                            </ext:Store>
                         </Store>
                         <ColumnModel>
                            <Columns>
                               <ext:Column ID="columnSourceOrder" runat="server" DataIndex="Order" Hidden="true"></ext:Column>
                               <ext:Column ID="columnSourceDescription" runat="server" DataIndex="Description" Flex="1"></ext:Column>
                            </Columns>
                         </ColumnModel>
                         <View>
                            <ext:GridView runat="server" ID="gridViewSourceFields" LoadMask="false" ItemCls="import-source">
                               <Listeners>
                                  <Render Handler="InitializeSourceDrag(this);"></Render>
                               </Listeners>
                            </ext:GridView>
                         </View>
                      </ext:GridPanel>
                   </Items>
                </ext:Panel>
             </Items>
          </ext:Viewport>
       </form>
    </body>
    </html>
    Last edited by fabricio.murta; Sep 09, 2016 at 5:23 PM.
  2. #2
    Hello @Edgar!

    There are some expected differences and breaking changes from version 2 to version 3, so not everything will be a drop-in replacement from a version to another, particularly two versions ahead in time.

    Please clarify, did you check how drag and drop currently works in Ext.NET 4 examples explorer and maybe ExtJS 6.0.2 documentation? Checking then will probably be the best reference to find how to use controls from 2.x that are breaking when just pasted over on a 4.x application.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    This belongs in the 4.x help, not the 1.x.

    The main problem is the drag part won't work.

    If you compare the ExtJS 4 DragZone code with the ExtJS 6 version, you'll notice they are exactly the same (as far as I can see).

    Any ideas?
  4. #4
    Managed to make the drag work.

    However, if I drop "Books" to a cell, then "DVDs" to the same cell, I get this error: "Unable to get property 'syncContent' of undefined or null reference" when calling the first "set" method.

                onNodeDrop: function (target, dd, e, data)
                {
                   var rowBody = Ext.fly(target).findParent('.x-grid-row', null, false),
                                   h = gridView.getRecord(rowBody),
                                   targetEl = Ext.get(target);
    
                   h.set('Source', data.sourceData.Description);
                   h.set('SourceOrder', data.sourceData.Order);
                   h.commit();
                   targetEl.update(data.sourceData.Description);
                   return true;
                }
  5. #5
    Hello Edgar!

    As you didn't provide your working version so I could help with the missing bit you had, I have just rewritten your test case based on this example:
    - DragDrop > Grid > Field to Grid

    Resulting then in this code:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
    
        <style>
            .x-drop-target-active {
                background-color : #afa;
            }
        </style>
    
        <script type="text/javascript">
            function ClearLinks(v) {
                var store = v.getStore();
                store.each(function (rec) { rec.set('Source', ''); rec.set('SourceOrder', -1); rec.commit(); });
            }
    
            var getTargetFromEvent = function (e) {
                var gridView = Ext.getCmp(this.id),
                    t = e.getTarget(gridView.getCellSelector()),
                    column, row, columnIndex;
    
                if (t) {
                    row = gridView.findItemByChild(t),
                    columnIndex = t.cellIndex;
    
                    if (row && Ext.isDefined(columnIndex)) {
                        column = gridView.getGridColumns()[columnIndex];
    
                        // Valid only if column is the desired one
                        if (column.id == 'columnImportSource') {
                            return {
                                node: t,
                                record: gridView.getRecord(row),
                                fieldName: gridView.ownerGrid.getVisibleColumnManager().getColumns()[columnIndex].dataIndex
                            }
                        }
                    }
                }
            };
    
            var onNodeEnter = function (target, dd, e, dragData) {
                delete this.dropOK;
                if (!target) {
                    return;
                }
    
                var f = dragData.field;
                if (!f) {
                    return;
                }
    
                var field = target.record.fieldsMap[target.fieldName];
                if (field.isNumeric) {
                    if (!f.isXType('numberfield')) {
                        return;
                    }
                }
                else if (field.isDateField) {
                    if (!f.isXType('datefield')) {
                        return;
                    }
                }
                else if (field.isBooleanField) {
                    if (!f.isXType('checkbox')) {
                        return;
                    }
                }
    
                this.dropOK = true;
                Ext.fly(target.node).addCls('x-drop-target-active');
            };
    
            var onNodeOver = function (target, dd, e, dragData) {
                return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
            };
    
            var onNodeOut = function (target, dd, e, dragData) {
                Ext.fly(target.node).removeCls("x-drop-target-active");
            };
    
            var onNodeDrop = function (target, dd, e, dragData) {
                if (this.dropOK) {
                    var value = dragData.field.getHtml();
                    target.record.set(target.fieldName, value);
                    this.onCellDrop(target.fieldName, value);
                    return true;
                }
            };
    
            var onCellDrop = function (field) {
                var store = Ext.getCmp(this.id).ownerGrid.store,
                    sorter = store.sorters.first();
    
                if (sorter && sorter.property == field) {
                    store.sort();
                }
            };
    
            var getDragData = function (e) {
                var field = e.getTarget('.x-grid-cell-inner', null, true),
                    oldMark,
                    text,
                    dragEl;
    
                if (field) {
                    dragEl = document.createElement('div');
                    dragEl.className = 'x-form-text';
                    text = field.getHtml();
                    dragEl.innerHTML = Ext.isEmpty(text) ? '*' : text;
                    return {
                        field: field,
                        ddel: dragEl
                    };
                }
            };
        </script>
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    this.storeImportFields.DataSource = this.Data;
                    this.storeImportFields.DataBind();
    
                    this.storeSourceFields.DataSource = this.Data2;
                    this.storeSourceFields.DataBind();           
                }
            }
    
            private object[] Data
            {
                get
                {
                    return new object[]
                    {
                        new object[] { "3m Co", "" },
                        new object[] { "Alcoa Inc", "" },
                        new object[] { "Altria Group Inc", "" },
                        new object[] { "American Express Company", "" }
                    };
                }
            }
    
            private object[] Data2
            {
               get
               {
                  return new object[]
                    {
                        new object[] { "Books" },
                        new object[] { "DVDs" },
                        new object[] { "Cars" }
                    };
               }
            }    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ID="testRM" />
    
            <ext:Panel
                ID="panelLink"
                runat="server"
                Width="1200"
                Title="Link fields">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:GridPanel
                        ID="gridImportFields"
                        runat="server"
                        Height="600"
                        Width="500">
                        <Store>
                            <ext:Store ID="storeImportFields" runat="server">
                                <Model>
                                    <ext:Model ID="modelImportFields" runat="server" IDProperty="ID">
                                        <Fields>
                                        <ext:ModelField Name="Description" Type="String" />
                                        <ext:ModelField Name="Source" Type="String" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column
                                    ID="columnImportDescription"
                                    runat="server"
                                    Text="Import field"
                                    DataIndex="Description"
                                    Flex="1" />
                                <ext:Column
                                    ID="columnImportSource"
                                    runat="server"
                                    Text="Source field"
                                    DataIndex="Source"
                                    Flex="1" />
                            </Columns>
                        </ColumnModel>
                        <Bin>
                            <ext:DropZone runat="server" ContainerScroll="true" Target="={#{gridImportFields}.getView().el}">
                                <GetTargetFromEvent Fn="getTargetFromEvent" />
                                <OnNodeEnter Fn="onNodeEnter" />
                                <OnNodeOver Fn="onNodeOver" />
                                <OnNodeOut Fn="onNodeOut" />
                                <OnNodeDrop Fn="onNodeDrop" />
                                <CustomConfig>
                                    <ext:ConfigItem Name="onCellDrop" Value="onCellDrop" Mode="Raw" />
                                </CustomConfig>
                            </ext:DropZone>
                        </Bin>
                    </ext:GridPanel>
                    <ext:Panel runat="server" ID="panelClear" Border="false">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                        </LayoutConfig>
                        <Items>
                            <ext:Button ID="btnClearLinks" runat="server" Text="Clear">
                                <Listeners>
                                    <Click Handler="ClearLinks(#{gridImportFields});"></Click>
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Panel>
                    <ext:GridPanel
                        ID="gridSourceFields"
                        runat="server"
                        Height="600"
                        Width="500">
                        <Store>
                            <ext:Store ID="storeSourceFields" runat="server">
                                <Model>
                                    <ext:Model ID="modelSourceFields" runat="server" IDProperty="Order">
                                        <Fields>
                                            <ext:ModelField Name="Description" Type="String"></ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ID="columnSourceDescription" runat="server" DataIndex="Description" Flex="1" />
                            </Columns>
                        </ColumnModel>
                        <Bin>
                            <ext:DragZone runat="server" AnimRepair="false" Target="={#{gridSourceFields}.getView().el}">
                                <GetDragData Fn="getDragData" />
                            </ext:DragZone>
                        </Bin>
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Notice I've removed all artifacts that didn't seem to be related to the issue as this makes much easier to reproduce and understand the problem. If I removed something important from the test case, please let me know!

    Providing test cases as clean as possible really helps us out help you. Hope this example fits your scenario!
  6. #6
    Obrigado FabrÃ*cio! It works.
  7. #7
    Glad it helped! Thanks for the feedback! We'll be marking this thread as closed, but feel free to re-post if you need something else regarding the issue discussed here!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] DOM Drag-Drop example initial drag height
    By electromorph in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 09, 2015, 12:36 PM
  2. Replies: 0
    Last Post: Jun 12, 2014, 12:11 PM
  3. Drag'n Drop
    By Yannis in forum 1.x Help
    Replies: 1
    Last Post: Oct 28, 2009, 6:14 PM
  4. [CLOSED] MultiSelect with drag and drop, Drop listener
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 30, 2009, 8:25 AM
  5. Drag & Drop
    By iwen in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 26, 2008, 1:23 PM

Tags for this Thread

Posting Permissions