Sep 22, 2010, 8:31 AM
[CLOSED] [1.0] Grid to Grid Drag Drop
Hi,
I am using the the drag and drop example on
https://examples1.ext.net/#/DragDrop...Grid_to_Grid1/
How can I programmatically enable and disable the drag and drop functionality on code behind?
I tried to set the Target property of <ext:DropTarget> during postback but it doesnt work as expected.
Here's my sample code:
Regards,
Marcelo
I am using the the drag and drop example on
https://examples1.ext.net/#/DragDrop...Grid_to_Grid1/
How can I programmatically enable and disable the drag and drop functionality on code behind?
I tried to set the Target property of <ext:DropTarget> during postback but it doesnt work as expected.
Here's my sample code:
<%@ 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()
});
}
this.Store1.DataSource = data;
this.Store1.DataBind();
this.DropTarget1.Target = "={GridPanel1.view.scroller.dom}";
this.DropTarget2.Target = "={GridPanel2.view.scroller.dom}";
}
[DirectMethod]
public void DisableDD()
{
this.DropTarget1.Target = "";
this.DropTarget2.Target = "";
Notification.Show(new NotificationConfig
{
Title = "Drag and Drop should now be disabled",
Icon = Icon.Information,
Html = "DropTarget1.Target is empty"
});
}
</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>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Generic function to add records.
var addRow = function (store, record, ddSource) {
// Search for duplicates
var foundItem = store.findExact('Name', record.data.Name);
// if not found
if (foundItem == -1) {
//Remove Record from the source
ddSource.grid.store.remove(record);
store.add(record);
// Call a sort dynamically
store.sort('Name', 'ASC');
}
};
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;
};
</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="GridPanel2"
runat="server"
DDGroup="firstGridDDGroup"
StoreID="Store2"
EnableDragDrop="true"
StripeRows="true"
AutoExpandColumn="Name"
Width="325"
Title="Right">
<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="RowSelectionModel2" runat="server" />
</SelectionModel>
</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); Store2.removeAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Disable Drag and Drop">
<Listeners>
<Click Handler="Ext.net.DirectMethods.DisableDD();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
<ext:DropTarget ID="DropTarget1" runat="server" Group="firstGridDDGroup">
<NotifyDrop Fn="notifyDrop1" />
</ext:DropTarget>
<ext:DropTarget ID="DropTarget2" runat="server" Group="secondGridDDGroup">
<NotifyDrop Fn="notifyDrop2" />
</ext:DropTarget>
</form>
</body>
</html>Regards,
Marcelo
Last edited by Daniil; Sep 22, 2010 at 4:14 PM.
Reason: [CLOSED]
