Drag and drop issue in a GridPanel with a hidden ImageCommandColumn

  1. #1

    Drag and drop issue in a GridPanel with a hidden ImageCommandColumn

    Version of Ext.Net: 2.2.0.1
    Framework: .NET Framework 4
    Operating system: Windows 8
    Visual Studio version: 2012

    I've tested this on Firefox 21, Chrome 27 and IE 10.

    Drag from the right grid panel to the second column of the first grid panel:

    Error: Unable to get property 'parentNode' of undefined or null reference

    If I remove the ImageCommandColumn it works.

    Is my approach wrong or is it a bug?

    Simplified code:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script type="text/javascript">
       function InitializeDrop(v) {
          var gridView = v,
              grid = gridView.up('gridpanel');
    
          grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
    
             getTargetFromEvent: function (e) {
                return e.getTarget('.drop-target');
             },
    
             onNodeEnter: function (target, dd, e, data) {
                Ext.fly(target).addCls('drop-target-hover');
             },
    
             onNodeOut: function (target, dd, e, data) {
                Ext.fly(target).removeCls('drop-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('sourceName', data.sourceData.Name);
                h.set('sourceOrder', data.sourceData.Order);
                h.commit();
                targetEl.update(data.sourceData.Name);
                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.Name;
                this.proxy.update(this.dragData.ddel);
             },
             getRepairXY: function () {
                return this.dragData.repairXY;
             }
          });
       }
    
       var setButtonState = function (grid, command, record, row) {
    
          if (record.data.showButton == false) {         
             command.hidden(true);
          }
       }
    </script>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
    
                this.Store2.DataSource = this.Data2;
                this.Store2.DataBind();           
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", "", -1, false },
                    new object[] { "Alcoa Inc", "", -1, true },
                    new object[] { "Altria Group Inc", "", -1, false},
                    new object[] { "American Express Company", "", -1, false}
                };
            }
        }
    
        private object[] Data2
        {
           get
           {
              return new object[]
                {
                    new object[] { 0, "Books" },
                    new object[] { 1, "DVDs" },
                    new object[] { 2, "Cars" }
                };
           }
        }    
    </script>
    
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
        <ext:Viewport ID="Viewport1" runat="server"  Margins="0 0 10 0" Layout="HBoxLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" 
                    runat="server" 
                    Title="Destination" 
                    Width="300" 
                    Height="200"
                    ColumnLines="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="sourceName" Type="String" />
                                        <ext:ModelField Name="sourceOrder" Type="Int" />
                                        <ext:ModelField Name="showButton" Type="Boolean" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" 
                                runat="server" 
                                DataIndex="company" 
                                Flex="1" 
                                Sortable="false" />
    
                           <ext:Column ID="Column6" runat="server" DataIndex="sourceName" TdCls="drop-target" ></ext:Column>                        
                           <ext:Column ID="Column7" runat="server" DataIndex="sourceOrder" Hidden="true"></ext:Column>                        
                            <ext:ImageCommandColumn ID="columnButton" runat="server" Width="25px">
                               <PrepareCommand Fn="setButtonState"></PrepareCommand>
                               <Commands>
                                  <ext:ImageCommand CommandName="ShowButton" Icon="ApplicationEdit"></ext:ImageCommand>
                               </Commands>
                               <Listeners>
                                  <Command Handler="alert( record.data.company);"></Command>
                               </Listeners>
                            </ext:ImageCommandColumn>
                        </Columns>
                    </ColumnModel>
                      <View>
                         <ext:GridView runat="server" ID="gridViewDestination" LoadMask="false">
                            <Listeners>
                               <Render Handler="InitializeDrop(this);"></Render>
                            </Listeners>
                         </ext:GridView>
                      </View>
                </ext:GridPanel>
                <ext:GridPanel ID="gridSourceFields" runat="server" Height="200" Width="100" Padding="5" EnableColumnHide="false" EnableColumnMove="false" EnableColumnResize="false" Title="Source">
                   <Store>
                      <ext:Store ID="Store2" runat="server">
                         <Model>
                            <ext:Model ID="modelSourceFields" runat="server" IDProperty="Order">
                               <Fields>
                                  <ext:ModelField Name="Order" Type="Int"></ext:ModelField>
                                  <ext:ModelField Name="Name" 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="columnSourceName" runat="server" DataIndex="Name" Flex="1" ></ext:Column>
                      </Columns>
                   </ColumnModel>
                   <View>
                      <ext:GridView runat="server" ID="gridViewSourceFields" LoadMask="false" ItemCls="drag-source">
                         <Listeners>
                            <Render Handler="InitializeSourceDrag(this);"></Render>
                         </Listeners>
                      </ext:GridView>
                   </View>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
  2. #2
    Your setButtonState raises js error, please use 'command.hidden=true;' instead 'command.hidden(true);'
  3. #3
    Quote Originally Posted by Vladimir View Post
    Your setButtonState raises js error, please use 'command.hidden=true;' instead 'command.hidden(true);'
    Thanks Vladimir. It works now. Please mark this issue as closed.

Similar Threads

  1. [CLOSED] Drag and Drop from GridPanel to GridPanel performance issue
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Nov 09, 2012, 3:26 PM
  2. [CLOSED] Some Issue with TreePanel Drag and Drop
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 19, 2012, 9:36 AM
  3. [CLOSED] Issue with drag and drop for portal in modal window
    By Labyrinth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 09, 2011, 9:13 AM
  4. Drag and drop issue
    By anulall in forum 1.x Help
    Replies: 0
    Last Post: Jul 12, 2011, 12:55 PM
  5. Drag-drop Gridpanel
    By johny_bravo in forum 1.x Help
    Replies: 0
    Last Post: Mar 25, 2011, 5:37 PM

Tags for this Thread

Posting Permissions