Feb 14, 2011, 9:43 PM
[CLOSED] Grid to Grid Drag and Drop Questions
Gentlemen,
I am working on making a gridpanel-to-gridpanel drag-and-drop interface. I have two questions pursuant to my example below:
1) How to move the red "draggable" area out of the Row Body for Datagrid and into it's own column (prefereably on the left)? I understand why this draggable area is in the body (it's a div defined in the GridPanel ext:GridView) but I want to move it to a column and I can't figure it out.
2) In the onNodeDrop event doesn't seem to be getting any data from the "data" variable. When I try to fetch specific properties, I get "undefined" as the value.
Below is a code sample (modified from your examples) showing these issues.
Thank you for any assistance!
I am working on making a gridpanel-to-gridpanel drag-and-drop interface. I have two questions pursuant to my example below:
1) How to move the red "draggable" area out of the Row Body for Datagrid and into it's own column (prefereably on the left)? I understand why this draggable area is in the body (it's a div defined in the GridPanel ext:GridView) but I want to move it to a column and I can't figure it out.
2) In the onNodeDrop event doesn't seem to be getting any data from the "data" variable. When I try to fetch specific properties, I get "undefined" as the value.
Below is a code sample (modified from your examples) showing these issues.
Thank you for any assistance!
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
List<object> data = new List<object>();
for (int i = 0; i < 10; i++)
{
data.Add(new
{
Name = "Rec " + i,
Column1 = i.ToString(),
Column2 = i.ToString()
});
}
Store1.DataSource = data;
Store1.DataBind();
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"}
};
HospitalStore.DataBind();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Drag and Drop from GridPanel to GridPanel - Ext.NET Examples</title>
<style type="text/css">
.app-header .x-panel-body {
background-color: #99BBE8;
}
.app-header h1 {
font-family: verdana,arial,sans-serif;
font-size: 20px;
}
.hospital-target {
border: 1px solid red;
width: 10px;
height: 15px;
}
.hospital-target.hospital-target-hover {
background-color: #D88;
}
.patient-source {
cursor: pointer;
}
.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;
}
</style>
<script type="text/javascript">
// Generic function to add records.
var addRow = function (store, record, ddSource) {
};
var notifyDrop1 = function (ddSource, e, data) {
// Loop through the selections
Ext.each(ddSource.dragData.selections, function (record) {
addRow(Store1, record, ddSource);
});
return true;
};
var notifyDrop2 = function (ddSource, e, data) {
// Loop through the selections
Ext.each(ddSource.dragData.selections, function (record) {
addRow(Store2, record, ddSource);
});
return true;
};
var getRepairXY = function () {
return this.dragData.repairXY;
};
var getTargetFromEvent = function (e) {
return e.getTarget(".hospital-target");
};
var onNodeEnter = function (target, dd, e, data) {
Ext.fly(target).addClass("hospital-target-hover");
};
var onNodeOut = function (target, dd, e, data) {
Ext.fly(target).removeClass("hospital-target-hover");
};
var onNodeOver = function (target, dd, e, data) {
return this.dropAllowed;
};
var onNodeDrop = function (target, dd, e, data) {
var rowIndex = HospitalGrid.getView().findRowIndex(target);
var h = HospitalGrid.getStore().getAt(rowIndex);
Ext.Msg.alert("Drop gesture", "Dropped patient " + data.selections.Name +
" on hospital " + h.data.Name);
return true;
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Drag and Drop from GridPanel to GridPanel</h1>
<p>This example shows how to setup two way drag and drop from one GridPanel to another.</p>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Name" />
<ext:RecordField Name="Column1" />
<ext:RecordField Name="Column2" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="Store2" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Name" />
<ext:RecordField Name="Column1" />
<ext:RecordField Name="Column2" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Panel ID="Panel1" runat="server" Width="650" Height="300">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West MarginsSummary="5 5 5 5">
<ext:GridPanel
ID="GridPanel1"
runat="server"
DDGroup="secondGridDDGroup"
StoreID="Store1"
EnableDragDrop="true"
StripeRows="true"
AutoExpandColumn="Name"
Width="325"
Title="Left">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Name" Header="Record Name" Width="160" DataIndex="Name" />
<ext:Column Header="Column 1" Width="60" DataIndex="Column1" />
<ext:Column Header="Column 2" Width="60" DataIndex="Column2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</West>
<Center MarginsSummary="5 5 5 0">
<ext:GridPanel
ID="HospitalGrid"
runat="server"
Title="Hospitals"
Region="Center"
Margins="0 5 5 0"
>
<Store>
<ext:Store ID="HospitalStore" runat="server">
<Reader>
<ext:JsonReader IDProperty="Code">
<Fields>
<ext:RecordField Name="Name" />
<ext:RecordField Name="Address" />
<ext:RecordField Name="Telephone" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column DataIndex="Name" Header="Name" Width="200" />
<ext:Column DataIndex="Address" Header="Address" Width="300" />
<ext:Column DataIndex="Telephone" Header="Telephone" Width="100" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" EnableRowBody="true" >
<GetRowClass Handler="rowParams.body = '<div class=\'hospital-target\'></div>';" />
</ext:GridView>
</View>
</ext:GridPanel>
</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">
<Listeners>
<Click Handler="Store1.loadData(Store1.proxy.data);" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
<ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel1.view.scroller.dom}" Group="firstGridDDGroup">
<NotifyDrop Fn="notifyDrop1" />
</ext:DropTarget>
<%-- <ext:DropTarget ID="DropTarget2" runat="server" Target="={HospitalGrid.view.scroller.dom}" Group="secondGridDDGroup">
<NotifyDrop Fn="notifyDrop2" />
</ext:DropTarget> --%>
<ext:DropZone ID="DropZone1" runat="server" Target="={HospitalGrid.getView().scroller}" Group="secondGridDDGroup">
<GetTargetFromEvent Fn="getTargetFromEvent" />
<OnNodeEnter Fn="onNodeEnter" />
<OnNodeOut Fn="onNodeOut" />
<OnNodeOver Fn="onNodeOver" />
<OnNodeDrop Fn="onNodeDrop" />
</ext:DropZone>
</form>
</body>
</html>
Last edited by Daniil; Feb 18, 2011 at 8:38 AM.
Reason: [CLOSED]
