[CLOSED] Programmatically Drag and Drop grids raises Runtime JS errors.

[Daly_AF]

Hi,

We are facing a runtime JS errors 'getBoundingClientRect' is null or not an object, 'scrollHeight' is null or not an object when we implement programmatically drag and drop grids into a window.

Steps to reproduce the error:

- click on the button "Show Swap Grid"
- when the window appears, swap records using drag and drop.
- close the window
- click again on the button "Show Swap Grid"
- when the window appears, swap records using drag and drop. And you will have errors.

Could you find code sample below:

ResearchController

public class ResearchController : Controller
    {
        public ActionResult Research()
        {
            return View();
        }

        public ActionResult GenericSwapGridWindow()
        {
            Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult();
            return pr;
        }

        public ActionResult GenericSwapGridView(String containerID)
        {
            Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
            return pr;
        }

        public ActionResult GenericDDSwapGridView(String containerID)
        {
            Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
            return pr;
        }
        public AjaxStoreResult GetData()
        {
            AjaxStoreResult result = new AjaxStoreResult();
            List<obj> list = new List<obj>();
            for (int i = 0; i < 3; i++)
            {
                obj record = new obj();
                record.Name = "name " + i;
                record.Column1 = "Column1 " + i;
                record.Column2 = "Column2 " + i;
                list.Add(record);
            }
            result.Data = list;
            return result;
        }
        public ContentResult GenerateGrid(String containerID, int nb)
        {
            ContentResult cr = new ContentResult();
            GridPanel grid = new GridPanel();
            grid.ID = "GridPanel" + nb;
            grid.DDGroup = "GridDDGroup";
            grid.EnableDragDrop = true;
            grid.AutoHeight = true;
            Store store = new Store();
            store.ID = "Store" + nb;
            if (nb.Equals(1))
            {
                HttpProxy proxy = new HttpProxy();
                proxy.Url = "/Research/GetData";
                store.Proxy.Add(proxy);
            }
            JsonReader reader = new JsonReader();
            reader.Root = "data";
            reader.TotalProperty = "total";
            RecordField field1 = new RecordField();
            field1.Name = "Name";
            reader.Fields.Add(field1);
            RecordField field2 = new RecordField();
            field2.Name = "Column1";
            reader.Fields.Add(field2);
            RecordField field3 = new RecordField();
            field3.Name = "Column2";
            reader.Fields.Add(field3);
            store.Reader.Add(reader);
            Column col1 = new Column();
            col1.DataIndex = "Name";
            Column col2 = new Column();
            col2.DataIndex = "Column1";
            Column col3 = new Column();
            col3.DataIndex = "Column2";
            grid.Store.Add(store);
            grid.ColumnModel.Columns.Add(col1);
            grid.ColumnModel.Columns.Add(col2);
            grid.ColumnModel.Columns.Add(col3);

            String gridScript = grid.ToScript(RenderMode.AddTo, containerID);
            cr.Content = string.Format("<script>{0}</script>", gridScript);
            return cr;
        }
        public ContentResult GenerateDropZone(int nb)
        {
            ContentResult cr = new ContentResult();
            String gridPanelID = "GridPanel" + nb;
            DropZone dropZone = new DropZone();
            dropZone.ID = "DropZone" + nb;
            dropZone.ContainerScroll = true;
            dropZone.Target = "={" + gridPanelID + ".view.scroller.dom}";
            dropZone.Group = "GridDDGroup";
            dropZone.OnContainerDrop.Handler = "return onContainerDrop(" + gridPanelID + ", source, e, data);";
            dropZone.OnContainerOver.Handler = "return onContainerOver(this," + gridPanelID + ", source, e, data);";
            String dropZoneScript = dropZone.ToScript(
                    selfRendering: true);
            cr.Content = string.Format("<script>{0}</script>", dropZoneScript);
            return cr;
        }

        public class obj
        {
            private string name;

            public string Name
            {
                get { return name; }
                set { name = value; }
            }
            private string column1;

            public string Column1
            {
                get { return column1; }
                set { column1 = value; }
            }
            private string column2;

            public string Column2
            {
                get { return column2; }
                set { column2 = value; }
            }
        }
    }

Research.aspx

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript">
            var onContainerOver = function (dz, grid, dd, e, data) {
                return dd.grid !== grid ? dz.dropAllowed : dz.dropNotAllowed;
            };

            var onContainerDrop = function (grid, dd, e, data) {
                if (dd.grid !== grid) {
                    Ext.each(data.selections, function (r) {
                        dd.grid.store.remove(r);
                    });
                    grid.store.add(data.selections);
                    return true;
                } else {
                    return false;
                }
            };


            var getRepairXY = function (e, dd) {
                if (this.dragData.selections.length > 0) {
                    var foundItem = dd.grid.store.find('Name', this.dragData.selections[0].data.Name);
                    var myRow = dd.grid.getView().getRow(foundItem);
                    this.invalidRow = myRow;
                    var xy = Ext.fly(myRow).getXY();
                    return xy;
                }
                return false;
            };

            var setDD = function () {
                this.getView().dragZone.getRepairXY = getRepairXY;
            };
            var getDragDropText = function () {
                var buf = [];

                buf.push("<ul>");

                Ext.each(this.getSelectionModel().getSelections(), function (record) {
                    buf.push("<li>" + record.data.Name + "</li>");
                });

                buf.push("</ul>");

                return buf.join("");
            };
            var addClick = function () {
                $('#win_div').load('/Research/GenericSwapGridWindow',
        {
            'containerID': 'win_div'
        },
              function (result, request) {
              }
            );
            };
        </script>
    </ext:XScript>
</head>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<body>
    <ext:Viewport ID="Viewport1" runat="server" >
        <Items>
            <ext:Button ID="_btn" Text="Show Swap Grid" runat="server">
                <Listeners>
                    <Click Handler="addClick();" />
                </Listeners>
            </ext:Button>
        </Items>
        <Content>
            <div id="win_div" />
        </Content>
    </ext:Viewport>
</body>
</html>

GenericDDSwapGridView.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel ID="Panel1" runat="server" Width="650" Height="300">
    <Items>
        <ext:BorderLayout ID="BorderLayout1" runat="server">
            <West MarginsSummary="5 5 5 5">
                <ext:Panel ID="_pnlSourceGrid" runat="server" Border="false" Title="grid1" AutoScroll="true" Width="350">
                    <AutoLoad Url="/Research/GenerateGrid" NoCache="true">
                        <Params>
                            <ext:Parameter Name="containerID" Value="#{_pnlSourceGrid}" Mode="Value" />
                            <ext:Parameter Name="nb" Value="1" Mode="Value" />
                        </Params>
                    </AutoLoad>
                </ext:Panel>
            </West>
            <Center MarginsSummary="5 5 5 0">
                <ext:Panel ID="_pnlDestinationGrid" runat="server" Border="false" Title="grid2" AutoScroll="true">
                    <AutoLoad Url="/Research/GenerateGrid" NoCache="true">
                        <Params>
                            <ext:Parameter Name="containerID" Value="#{_pnlDestinationGrid}" Mode="Value" />
                            <ext:Parameter Name="nb" Value="2" Mode="Value" />
                        </Params>
                    </AutoLoad>
                </ext:Panel>
            </Center>
        </ext:BorderLayout>
    </Items>
    <BottomBar>
        <ext:Toolbar ID="Toolbar1" runat="server">
            <Items>
                <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                <ext:Button ID="Button1" runat="server" Text="Reset both grids">
                    <Listeners>
                        <Click Handler="Store1.loadData(Store1.proxy.data);Store2.removeAll();" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </BottomBar>
</ext:Panel>
<ext:Panel runat="server" ID="Panel" Header="false" Border="false">
    <AutoLoad NoCache="true" Url="/Research/GenerateDropZone" AutoDataBind="true" ShowMask="true">
        <Params>
            <ext:Parameter Name="nb" Value="1" Mode="Value" />
        </Params>
    </AutoLoad>
</ext:Panel>
<ext:Panel runat="server" ID="Panel2" Header="false" Border="false">
    <AutoLoad NoCache="true" Url="/Research/GenerateDropZone" AutoDataBind="true" ShowMask="true">
        <Params>
            <ext:Parameter Name="nb" Value="2" Mode="Value" />
        </Params>
    </AutoLoad>
</ext:Panel>

GenericSwapGridWindow.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Window runat="server" ID="_swapGrd" AutoHeight="true" Width="700" CloseAction="Close"
    Modal="true" Constrain="true" Shadow="None" Maximizable="true">
    <Items>
        <ext:Panel runat="server" ID="_pnl" Layout="FitLayout">
             <AutoLoad NoCache="true" Url="/Research/GenericDDSwapGridView" AutoDataBind="true" ShowMask="true">
                <Params>
                    <ext:Parameter Name="containerID" Value="#{_pnl}" Mode="Value" />
                </Params>
            </AutoLoad>
        </ext:Panel>
    </Items>
    <Listeners>
        <BeforeClose Handler="DropZone1.destroy(); DropZone2.destroy();" />
    </Listeners>
</ext:Window>

Thank you in advance.

[Daniil]

Hi @Daly_AF,

There are two problems.

1. This doesn't work well.

DropZone1.destroy();

There is a bug in v1. Fixed in SVN.
http://svn.ext.net/premium/branches/1/

Fix

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script>
    Ext.net.ProxyDDCreator.override({
        destroy: function () {
            Ext.each(this.ddControl, function (dd) {
                if (dd) {
                    if (dd.destroy) {
                        dd.destroy();
                    } else if (dd.unreg) {
                        dd.unreg();
                    }
                }
            });
        }
    });
</script>

2. With your configuration closing the Window doesn't destroy all the thing which must be destroyed. For example, the GridPanels. You can destroy them manually in the same way as you are destroying the DropZones in the Window's BeforeClose listener. But I would suggest to change the design slightly.

GenericDDSwapGridView.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel ID="Panel1" runat="server" Width="650" Height="300">
    <Bin>
        <ext:Panel runat="server" Hidden="true">
            <AutoLoad NoCache="true" Url="/Test/GenerateDropZone">
                <Params>
                    <ext:Parameter Name="nb" Value="1" Mode="Value" />
                </Params>
            </AutoLoad>
        </ext:Panel>
        <ext:Panel runat="server" Hidden="true">
            <AutoLoad NoCache="true" Url="/Test/GenerateDropZone">
                <Params>
                    <ext:Parameter Name="nb" Value="2" Mode="Value" />
                </Params>
            </AutoLoad>
        </ext:Panel>
    </Bin>
    <Listeners>
        <AfterRender Handler="this.bin[0].render(Ext.getBody());
                              this.bin[1].render(Ext.getBody());" />
    </Listeners>
    <Items>
        <ext:BorderLayout runat="server">
            <West MarginsSummary="5 5 5 5">
                <ext:Panel 
                    ID="_pnlSourceGrid" 
                    runat="server" 
                    Border="false" 
                    Title="grid1" 
                    AutoScroll="true"
                    Width="350">
                    <AutoLoad Url="/Test/GenerateGrid" NoCache="true">
                        <Params>
                            <ext:Parameter Name="containerID" Value="#{_pnlSourceGrid}" Mode="Value" />
                            <ext:Parameter Name="nb" Value="1" Mode="Value" />
                        </Params>
                    </AutoLoad>
                </ext:Panel>
            </West>
            <Center MarginsSummary="5 5 5 0">
                <ext:Panel 
                    ID="_pnlDestinationGrid" 
                    runat="server" 
                    Border="false" 
                    Title="grid2" 
                    AutoScroll="true">
                    <AutoLoad Url="/Test/GenerateGrid" NoCache="true">
                        <Params>
                            <ext:Parameter Name="containerID" Value="#{_pnlDestinationGrid}" Mode="Value" />
                            <ext:Parameter Name="nb" Value="2" Mode="Value" />
                        </Params>
                    </AutoLoad>
                </ext:Panel>
            </Center>
        </ext:BorderLayout>
    </Items>
    <BottomBar>
        <ext:Toolbar runat="server">
            <Items>
                <ext:ToolbarFill runat="server" />
                <ext:Button runat="server" Text="Reset both grids">
                    <Listeners>
                        <Click Handler="Store1.loadData(Store1.proxy.data); Store2.removeAll();" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </BottomBar>
</ext:Panel>

Controller Action GenericDDSwapGridView

public ActionResult GenericDDSwapGridView(string containerID)
{
    Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
    pr.SingleControl = true;
    pr.RenderMode = RenderMode.AddTo;

    return pr;
}

[Daly_AF]

Thank you it works.