Dec 20, 2016, 4:16 AM
[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
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&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.