Jun 15, 2012, 2:25 PM
Drag and Drop Gridpanel to Gridpanel
Hi,
I've got a working example of draging and dropping from gridpanel to gridpanel, but instead of just two, I've added a third. My issue is that I can't drag from gridpanel 2 to gridpanel 3, and vice versa. I first have to drag the records back to the gridpanel1 first. I don't want to use the treeview version either. Here's my code, how do I modify this to achieve the above? Thanks.
I've got a working example of draging and dropping from gridpanel to gridpanel, but instead of just two, I've added a third. My issue is that I can't drag from gridpanel 2 to gridpanel 3, and vice versa. I first have to drag the records back to the gridpanel1 first. I don't want to use the treeview version either. Here's my code, how do I modify this to achieve the above? Thanks.
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
List<object> data = new List<object>();
for (int i = 0; i < 10; i++)
{
data.Add(new
{
Tenant = "Rec " + i,
Reference = i.ToString(),
Total = i.ToString()
});
}
this.Store1.DataSource = data;
this.Store1.DataBind();
}
Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
// Generic function to add records.
var addRow = function (store, record, ddSource) {
// Search for duplicates
var foundItem = store.findExact('Tenant', record.data.Tenant);
// 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('Tenant', '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;
};
var notifyDrop3 = function (ddSource, e, data) {
// Loop through the selections
Ext.each(ddSource.dragData.selections, function (record) {
addRow(Store3, record, ddSource);
});
return true;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1 style="font-size: x-large">Rent Demand Drag and Drop</h1>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Tenant" />
<ext:RecordField Name="Reference" />
<ext:RecordField Name="Total" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="Store2" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Tenant" />
<ext:RecordField Name="Reference" />
<ext:RecordField Name="Total" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="Store3" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Tenant" />
<ext:RecordField Name="Reference" />
<ext:RecordField Name="Total" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Panel ID="Panel1" runat="server" Width="950" 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="Tenant"
Width="325"
Title="Today's Rent Demands">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Tenant" Header="Record Name" Width="160" DataIndex="Tenant" />
<ext:Column Header="Reference" Width="60" DataIndex="Reference" />
<ext:Column Header="Total" Width="60" DataIndex="Total" />
</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="Tenant"
Width="325"
Title="Receipt and Pay">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Tenant" Header="Record Name" Width="160" DataIndex="Tenant" />
<ext:Column Header="Reference" Width="60" DataIndex="Reference" />
<ext:Column Header="Total" Width="60" DataIndex="Total" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Center>
<East MarginsSummary="5 5 5 0">
<ext:GridPanel
ID="GridPanel3"
runat="server"
DDGroup="firstGridDDGroup"
StoreID="Store3"
EnableDragDrop="true"
StripeRows="true"
AutoExpandColumn="Tenant"
Width="325"
Title="Receipt Only">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Tenant" Header="Record Name" Width="160" DataIndex="Tenant" />
<ext:Column Header="Reference" Width="60" DataIndex="Reference" />
<ext:Column Header="Total" Width="60" DataIndex="Total" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel3" runat="server" />
</SelectionModel>
</ext:GridPanel>
</East>
</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(); Store3.removeAll();" />
</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="={GridPanel2.view.scroller.dom}" Group="secondGridDDGroup">
<NotifyDrop Fn="notifyDrop2" />
</ext:DropTarget>
<ext:DropTarget ID="DropTarget3" runat="server" Target="={GridPanel3.view.scroller.dom}" Group="secondGridDDGroup">
<NotifyDrop Fn="notifyDrop3" />
</ext:DropTarget>
</form>
</body>
</html>
Last edited by Kev; Jun 15, 2012 at 2:35 PM.