[CLOSED] bi-directional drag/drop

  1. #1

    [CLOSED] bi-directional drag/drop

    Support,

    I am looking for drag/drop between grids. However, i need more than the Grid to Grid example. I dont want to move the records. i want to FILL a cell from the data from the other grid.

    The Field to Grid example more fits what i need.

    When i do a single direction drag/drop (using Dragzone/Dropzone), it works great. But i need to be able to drag back in the other direction. WHen i add Dragzone2 and DropZone2, it fails to work properly. If i remove the DragZone2/DropZone2, it works great. i assume the problem is in this.dragzone, and this doesnt work across two of them?

    This is the real example i need.
    I have TWO grids.
    Patient grid has id, name and hospitalName.
    Hospital grid has id name and patientName

    I want to drag a Hospital record to the patient grid and drop on a SINGLE patient (only on the hospitalName column). When i do that, it will fill in the hospitalName and remove that hospital from the hospital Grid.
    I then want to be able to drag that hospital from the patient grid and put it back in the hospital grid. this would then add it back to the hospital grid and empty the hospitalName value for the source record (in patient grid).

    Now i got it all working, but i just cant get the second direction (back to the hospital grid to work.

    example code shows the problem. ( i trimmed out some functions so i can get it to be a full example)
    Please assist.
    Thanks,
    /Z

    <%@ Page Language="C#" %>
    
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            PatientStore.DataSource = new List<object>
            {
                new { InsuranceCode="11111", Name="Fred Bloggs", Address="Main Street", Telephone="555 1234 123" },
                new { InsuranceCode="22222", Name="Fred West", Address="Cromwell Street", Telephone="666 666 666" },
                new { InsuranceCode="33333", Name="Fred Mercury", Address="Over The Rainbow", Telephone="555 321 0987" },
                new { InsuranceCode="44444", Name="Fred Forsyth", Address="Blimp Street", Telephone="555 111 2222" },
                new { InsuranceCode="55555", Name="Fred Douglass", Address="Talbot County, Maryland", Telephone="N/A" }
            };
    
    
            HospitalStore.DataSource = new List<object>
            {
                new { Code="AAAAA", Name="Saint Thomas", Address="Westminster Bridge Road, SE1 7EH", Telephone="020 7188 7188" },
                new { Code="BBBBB", Name="Queen's Medical Centre", Address="Derby Road, NG7 2UH", Telephone="0115 924 9924" },
                new { Code="CCCCC", Name="Saint Bartholomew", Address="West Smithfield, EC1A 7BE", Telephone="020 7377 7000" },
                new { Code="DDDDD", Name="Royal London", Address="Whitechapel, E1 1BB", Telephone="020 7377 7000" }
            };
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head id="Head1" runat="server">
        <title>Drag&amp;Drop - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <style>
            .app-header .x-panel-body {
                background-color: #ddd;
                padding-left: 5px;
            }
    
    
            .app-header h1 {
                font-family: verdana,arial,sans-serif;
                font-size: 20px;
                color: #15428B;
            }
    
    
            .hospital-target {
                border: 1px solid red;
                margin: 5px;
                padding: 5px;
                font-size: small;
                cursor: default;
            }
    
    
                .hospital-target.hospital-target-hover {
                    background-color: #C0C0C0;
                }
    
    
            .patient-source {
                cursor: pointer;
            }
    
    
            .patient-view table {
                border-collapse: separate;
                border-spacing: 2px;
            }
    
    
            .patient-view td {
                font-family: verdana,arial,sans-serif;
                font-size: 12px;
            }
    
    
            td.patient-label {
                background-color: #ddd;
                border: 1px solid #bbb;
                font-weight: bold;
                text-align: right;
                width: 100px;
                padding: 0px 3px 0px 0px;
            }
    
    
            .patient-over {
                background-color: #EFEFEF;
                cursor: pointer;
            }
    
    
            .patient-selected {
                background-color: #DFE8F6;
                cursor: pointer;
            }
        </style>
    
    
        <script>
            /*
             * Here is where we "activate" the DataView.
             * We have decided that each node with the class "patient-source" encapsulates a single draggable
             * object.
             *
             * So we inject code into the DragZone which, when passed a mousedown event, interrogates
             * the event to see if it was within an element with the class "patient-source". If so, we
             * return non-null drag data.
             *
             * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
             * The data must contain a property called "ddel" which is a DOM element which provides an image
             * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
             * We can insert any other data into the data object, and this will be used by a cooperating DropZone
             * to perform the drop operation.
             */
    
    
    
    
            //      On receipt of a mousedown event, see if it is within a draggable element.
            //      Return a drag data object if so. The data object can contain arbitrary application
            //      data, but it should also contain a DOM element in the ddel property to provide
            //      a proxy to drag.
            var getDragData = function (e) {
                
                var sourceEl    = e.getTarget(),
                        view = App.PatientView.getView(),
                        rowEl = view.findItemByChild(sourceEl),
                        rec  = rowEl && view.getRecord(rowEl);
    
    
                if (sourceEl) {
                    d = sourceEl.cloneNode(true);
                    d.id = Ext.id();
    
    
                    return {
                        ddel: d,
                        sourceEl: sourceEl,
                        repairXY: Ext.fly(sourceEl).getXY(),
                        sourceStore: null,
                        draggedRecord: rec
                    }
                }                                   
            };
    
    
            //      Provide coordinates for the proxy to slide back to on failed drag.
            //      This is the original XY coordinates of the draggable element.
            var getRepairXY = function () {
                return this.dragData.repairXY;
            };
    
    
    
    
    
    
    
    
            /*
             * Here is where we "activate" the GridPanel.
             * We have decided that the element with class "hospital-target" is the element which can receieve
             * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
             * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
             * the mouse if over an element which can receieve drop gestures.
             *
             * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
             * call several "onNodeXXXX" methods at various points. These include:
             *
             * onNodeEnter
             * onNodeOut
             * onNodeOver
             * onNodeDrop
             *
             * We provide implementations of each of these to provide behaviour for these events.
             */
    
    
    
    
            //      If the mouse is over a target node, return that node. This is
            //      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
            var getTargetFromEvent = function (e) {
                return e.getTarget(".hospital-target");
            };
    
    
    
    
            //      On entry into a target node, highlight that node.
            var onNodeEnter = function (target, dd, e, data) {
                Ext.fly(target).addCls("hospital-target-hover");
            };
    
    
    
    
            //      On exit from a target node, unhighlight that node.
            var onNodeOut = function (target, dd, e, data) {
                Ext.fly(target).removeCls("hospital-target-hover");
            };
    
    
    
    
            //      While over a target node, return the default drop allowed class which
            //      places a "tick" icon into the drag proxy.
            var onNodeOver = function (target, dd, e, data) {
                return Ext.dd.DropZone.prototype.dropAllowed;
            };
    
    
    
    
            //      On node drop, we can interrogate the target node to find the underlying
            //      application object that is the real target of the dragged data.
            //      In this case, it is a Record in the GridPanel's Store.
            //      We can use the data set up by the DragZone's getDragData method to read
            //      any data we decided to attach.
            var onNodeDrop = function (target, dd, e, data) {
                var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
                    mainRow = rowBody.previousSibling,
                    h = App.HospitalGrid.getView().getRecord(mainRow),
                    targetEl = Ext.get(target),
                    html = targetEl.dom.innerHTML;
    
    
                if (html == 'Drop Patient Here') {
                    html = data.draggedRecord.data.Name;
                } else {
                    html = data.draggedRecord.data.Name + ', ' + targetEl.dom.innerHTML;
                }
    
    
                targetEl.update(html);
                Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.draggedRecord.data.Name +
                    ' on hospital ' + h.data.Name);
                return true;
            };
    
    
    
    
    
    
            ///PART 2
    
    
            var getDragData2 = function (e) {
    
    
                var sourceEl = e.getTarget(),
                        view = App.HospitalGrid.getView(),
                        rowEl = view.findItemByChild(sourceEl),
                        rec = rowEl && view.getRecord(rowEl);
    
    
                if (sourceEl) {
                    d = sourceEl.cloneNode(true);
                    d.id = Ext.id();
    
    
                    return {
                        ddel: d,
                        sourceEl: sourceEl,
                        repairXY: Ext.fly(sourceEl).getXY(),
                        sourceStore: null,
                        draggedRecord: rec
                    }
                }
            };
    
    
            //      Provide coordinates for the proxy to slide back to on failed drag.
            //      This is the original XY coordinates of the draggable element.
            var getRepairXY2 = function () {
                return this.dragData.repairXY;
            };
    
    
    
    
    
    
    
    
            /*
             * Here is where we "activate" the GridPanel.
             * We have decided that the element with class "hospital-target" is the element which can receieve
             * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
             * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
             * the mouse if over an element which can receieve drop gestures.
             *
             * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
             * call several "onNodeXXXX" methods at various points. These include:
             *
             * onNodeEnter
             * onNodeOut
             * onNodeOver
             * onNodeDrop
             *
             * We provide implementations of each of these to provide behaviour for these events.
             */
    
    
    
    
            //      If the mouse is over a target node, return that node. This is
            //      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
            var getTargetFromEvent2 = function (e) {
                return e.getTarget(".hospital-target");
            };
    
    
    
    
            //      On entry into a target node, highlight that node.
            var onNodeEnter2 = function (target, dd, e, data) {
                Ext.fly(target).addCls("hospital-target-hover");
            };
    
    
    
    
            //      On exit from a target node, unhighlight that node.
            var onNodeOut2 = function (target, dd, e, data) {
                Ext.fly(target).removeCls("hospital-target-hover");
            };
    
    
    
    
            //      While over a target node, return the default drop allowed class which
            //      places a "tick" icon into the drag proxy.
            var onNodeOver2 = function (target, dd, e, data) {
                return Ext.dd.DropZone.prototype.dropAllowed;
            };
    
    
    
    
            //      On node drop, we can interrogate the target node to find the underlying
            //      application object that is the real target of the dragged data.
            //      In this case, it is a Record in the GridPanel's Store.
            //      We can use the data set up by the DragZone's getDragData method to read
            //      any data we decided to attach.
            var onNodeDrop2 = function (target, dd, e, data) {
                var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
                    mainRow = rowBody.previousSibling,
                    h = App.PatientView.getView().getRecord(mainRow),
                    targetEl = Ext.get(target),
                    html = targetEl.dom.innerHTML;
    
    
                if (html == 'Drop Hospital Here') {
                    html = data.draggedRecord.data.Name;
                } else {
                    html = data.draggedRecord.data.Name + ', ' + targetEl.dom.innerHTML;
                }
    
    
                targetEl.update(html);
                Ext.Msg.alert('Drop gesture', 'Dropped hospital ' + data.draggedRecord.data.Name +
                    ' on patient ' + h.data.Name);
                return true;
            };
    
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
    
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Container ID="Container1"
                        runat="server"
                        Cls="app-header"
                        Height="30"
                        Region="North"
                        Html="<h1>Patient Hospital Assignment</h1>"
                        MarginSpec="5" />
    
    
                    
                    <ext:GridPanel
                        ID="PatientView"
                        runat="server"
                        Title="Hospitals"
                        Region="West"
                        MarginSpec="0 5 5 0">
                        <Store>
                            <ext:Store ID="PatientStore" runat="server">
                                <Model>
                                    <ext:Model ID="Model3" runat="server" IDProperty="InsuranceCode">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Address" />
                                            <ext:ModelField Name="Telephone" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ID="Column4" runat="server" DataIndex="Name" Text="NAME" Width="200" />
                                <ext:Column ID="Column5" runat="server" DataIndex="Address" Text="Address" Width="300" />
                                <ext:Column ID="Column6" runat="server" DataIndex="Telephone" Text="Telephone" Width="100" />
                            </Columns>
                        </ColumnModel>
                        <Features>
                            <ext:RowBody ID="RowBody2" runat="server" RowBodyDivCls="hospital-target">
                                <GetAdditionalData
                                    Handler="return {rowBody: 'Drop Patient Here', rowBodyDivCls:'hospital-target'};" />
                            </ext:RowBody>
                        </Features>
                    </ext:GridPanel>
    
    
                    <ext:GridPanel
                        ID="HospitalGrid"
                        runat="server"
                        Title="Hospitals"
                        Region="Center"
                        MarginSpec="0 5 5 0">
                        <Store>
                            <ext:Store ID="HospitalStore" runat="server">
                                <Model>
                                    <ext:Model ID="Model2" runat="server" IDProperty="Code">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Address" />
                                            <ext:ModelField Name="Telephone" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ID="Column1" runat="server" DataIndex="Name" Text="NAME" Width="200" />
                                <ext:Column ID="Column2" runat="server" DataIndex="Address" Text="Address" Width="300" />
                                <ext:Column ID="Column3" runat="server" DataIndex="Telephone" Text="Telephone" Width="100" />
                            </Columns>
                        </ColumnModel>
                        <Features>
                            <ext:RowBody ID="RowBody1" runat="server" RowBodyDivCls="hospital-target">
                                <GetAdditionalData
                                    Handler="return {rowBody: 'Drop Patient Here', rowBodyDivCls:'hospital-target'};" />
                            </ext:RowBody>
                        </Features>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
    
    
            <ext:DragZone ID="DragZone1" runat="server" Target="={#{PatientView}.getView().el}">
                <GetDragData Fn="getDragData" />
                <GetRepairXY Fn="getRepairXY" />
            </ext:DragZone>
    
    
            <ext:DropZone ID="DropZone1" runat="server" Target="={#{HospitalGrid}.getView().el}">
                <GetTargetFromEvent Fn="getTargetFromEvent" />
                <OnNodeEnter Fn="onNodeEnter" />
                <OnNodeOut Fn="onNodeOut" />
                <OnNodeOver Fn="onNodeOver" />
                <OnNodeDrop Fn="onNodeDrop" />
            </ext:DropZone>
    
    
                    <ext:DragZone ID="DragZone2" runat="server" Target="={#{HospitalGrid}.getView().el}">
                <GetDragData Fn="getDragData2" />
                <GetRepairXY Fn="getRepairXY2" />
            </ext:DragZone>
    
    
            <ext:DropZone ID="DropZone2" runat="server" Target="={#{PatientView}.getView().el}">
                <GetTargetFromEvent Fn="getTargetFromEvent2" />
                <OnNodeEnter Fn="onNodeEnter2" />
                <OnNodeOut Fn="onNodeOut2" />
                <OnNodeOver Fn="onNodeOver2" />
                <OnNodeDrop Fn="onNodeDrop2" />
            </ext:DropZone>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Jan 21, 2017 at 3:09 PM.
  2. #2
    Hello @Z!

    You sample test case has layout issues at least that are triggering errors on load. While this may not be related to the issue itself, it would at the least distract from the main problem. Don't you get those issues on load your side? I noticed also that this sample loads even worse in Ext.NET 4.

    You can see that there's no problem using two drop zones in a same page, so chances are the problem are related to these glitches on the page. See this example: Drag & Drop - Basic - DOM.

    Well, example just shows two or more drop zones working, as I could see your example gets the two "drag zones" correctly. Besides, you probably could use the approach there for custom handling the dragged and dropped record. But that will require a whole new client-side script programming.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Not quite what i was looking for. In any case, i scrapped my D/D code and rebuilt it from scratch a piece at a time. i used DragZone/DropZone and it works fine now. so you can close this thread.

    I do have one minor issue in that if the grid has no data, the dropzone doesn't accept. However, i will build a new testcase for that later in a separate thread.

    Thanks,
    /Z
  4. #4
    Hello @Z!

    Sorry it was not really what you expected as a reply, but glad you could fix your case properly, thanks for your feedback!
    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

Posting Permissions