PDA

View Full Version : Grid1 to Grid2 (Drag andDrop) with Row Reording in Grid2



sush
May 15, 2012, 1:38 PM
Hi,

I'm trying to combine a couple of examples which uses the GridDragDrop plugin -- "Grid to Grid1" and "Rows Reordering". The drag/drop across the grids works fine, however when attempting to reorder the rows in Grid2 I'm seeing a couple of issues. The first issue is a javascript error in IE (Error: 'undefined' is null or not an object) the first time I click on a row in Grid2 (after performing an initial drag/drop to get a row onto the grid). The javascript error does not occur in Chrome and Firefox. The second issue is the DragText is not being displayed properly when performing the reordering in Grid2, however, the reorder operation seems to be handled appropriately.

Thanks.



<%@ 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();
}
</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" type="text/css" />

<script type="text/javascript">
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("");
};
</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;" />
<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" />
<ext:Column ID="Column6" runat="server" Text="Column 2" Width="60" DataIndex="Column2" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView2" runat="server">
<Plugins>
<ext:GridDragDrop ID="GridDragDrop2" runat="server" DragGroup="secondGridDDGroup" DropGroup="firstGridDDGroup"/>
<ext:GridDragDrop ID="GridDragDrop3" runat="server" DragGroup="secondGridDDGroup" DropGroup="secondGridDDGroup" DragText="Drag and drop to reorganize"/>
</Plugins>
<Listeners>
<AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" />
<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>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button1" runat="server" Text="Reset both grids">
<Listeners>
<Click Handler="#{Store1}.loadData(#{Store1}.proxy.data); #{Store2}.removeAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</form>
</body>
</html>