PDA

View Full Version : [CLOSED] Drag/Drop between grids



luiz
Nov 15, 2013, 7:57 PM

Baidaly
Nov 15, 2013, 10:31 PM
Hello!

Please, take a look at this sample: http://examples2.ext.net/#/DragDrop/Grid/Grid_to_Grid/

You should define own Drop handler, which will do required actions.

Also, this thread can be helpful: http://forums.ext.net/showthread.php?27211

luiz
Nov 16, 2013, 8:53 PM
Hi Baidaly, thanks for you replay.

I tried to use their examples, but could not resolve the problem.

I tried to add an event to the combo, but I could recover the values ​​of the row of the grid.

See my example:

<%@ 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.StoreC.DataSource = data;
this.StoreC.DataBind();

this.Store1.DataSource = data;
this.Store1.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<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" />

<script>
var getDragDropText = function () {
var buf = [];

buf.push("<ul>");

Ext.each(this.view.panel.getSelectionModel().getSe lection(), function (record) {
buf.push("<li>" + record.data.Name + "</li>");
});

buf.push("</ul>");

return buf.join("");
};

var ComboAfterRender = function (combo)
{
//combo.select(GridPanel2.getCurrentPosition().row);
}
</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:Panel ID="Panel1" runat="server" Width="650" Height="300">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" Padding="5" />
</LayoutConfig>
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
MultiSelect="true"
Flex="1"
Title="Left"
Margins="0 2 0 0">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Column1" />
<ext:ModelField Name="Column2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Record Name" Width="160" DataIndex="Name" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Column 1" Width="60" DataIndex="Column1" />
<ext:Column ID="Column3" runat="server" Text="Column 2" Width="60" DataIndex="Column2" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server">
<Plugins>
<ext:GridDragDrop ID="GridDragDrop1" runat="server" DragGroup="firstGridDDGroup" DropGroup="secondGridDDGroup" />
</Plugins>
<Listeners>
<AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" Delay="1" />
<Drop Handler="var dropOn = overModel ? ' ' + dropPosition + ' ' + overModel.get('Name') : ' on empty view';
Ext.net.Notification.show({title:'Drag from right to left', html:'Dropped ' + data.records[0].get('Name') + dropOn});" />
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:GridPanel
ID="GridPanel2"
runat="server"
MultiSelect="true"
Title="Right"
Flex="1"
Margins="0 0 0 3">
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Column1" />
<ext:ModelField Name="Column2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column4" runat="server" Text="Record Name" Width="160" DataIndex="Name" Flex="1" />
<ext:Column ID="Column5" runat="server" Text="Column 1" Width="60" DataIndex="Column1" Flex="1" />
<ext:ComponentColumn ID="Column6" runat="server" Text="Column 2" Width="60" DataIndex="Column2" Flex="2">
<Component>
<ext:ComboBox ID="ComboBox" runat="server" DisplayField="Name" ValueField="Column1" AllowBlank="false" EmptyText="..Select..">
<Store>
<ext:Store ID="StoreC" runat="server">
<Model>
<ext:Model ID="Model" runat="server">
<Fields>
<ext:ModelField Name="Column1" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<AfterRender Fn="ComboAfterRender(this)" />
</Listeners>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView2" runat="server">
<Plugins>
<ext:GridDragDrop ID="GridDragDrop2" runat="server" DragGroup="secondGridDDGroup" DropGroup="firstGridDDGroup" />
</Plugins>
<Listeners>
<AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" Delay="1" />
<Drop Handler="var dropOn = overModel ? ' ' + dropPosition + ' ' + overModel.get('Name') : ' on empty view';
Ext.net.Notification.show({title:'Drag from left to right', html:'Dropped ' + data.records[0].get('Name') + dropOn});" />
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</form>
</body>
</html>


Any suggestion?

Thanks!

Daniil
Nov 18, 2013, 5:18 AM
Hi @luiz,

I guess your ComponentColumn is supposed to be used with Editor="true", isn't?

If you set up it and remove Type="Int" here (because of type mismatch):

<ext:ModelField Name="Column1" Type="Int" />
it should start working.

luiz
Nov 19, 2013, 12:01 AM
Hi Daniil
Works fine now.
Please close this thread.
Thanks Daniil and Baidaly for yous helpers.

Baidaly
Nov 19, 2013, 12:13 AM
Hi Daniil
Works fine now.
Please close this thread.
Thanks Daniil and Baidaly for yous helpers.

Thank you for update! You are welcome!