Drag and Drop between Two Grids (both ways):
Create 2 grids
Left Grid: (Add column model and other tags. I just mentioning items required for drag and drop)
<ext:GridPanel ID="leftGridPanel"
runat="server"
StoreID="StoreLeft"
StripeRows="true" Shim="false" TrackMouseOver="true" >
<CustomConfig>
<ext:ConfigItem Name="ddGroup" Value="1to2" Mode="Value"/>
</CustomConfig>
</ext:GridPanel>
Right Grid:
<ext:GridPanel ID="rightGridPanel" runat="server" StoreID="StoreRight" StripeRows="true" Shim="false" TrackMouseOver="true" >
<CustomConfig>
<ext:ConfigItem Name="ddGroup" Value="2to1" Mode="Value"/>
</CustomConfig>
</ext:GridPanel>
Then initialize DD in Script Manager
<ext:ScriptManager ID="ScriptManager1" runat="server">
<Listeners>
<DocumentReady Handler="
setupDD(#{leftGridPanel},#{rightGridPanel},'1to2');
setupDD(#{rightGridPanel},#{leftGridPanel},'2to1');
" />
</Listeners>
</ext:ScriptManager>
Finally paste the below js code at top of aspx page.
<script language="javascript" type="text/javascript">
function setupDD(grid, gridTarget, dndGroup)
{
grid.dragZone = new Ext.grid.GridDragZone(grid, {
ddGroup: dndGroup,
containerScroll: false
});
// here the change
var dropTargetEl = gridTarget.getView().el.dom.childNodes[0].childNodes[1];
var ddrow = new Ext.dd.DropZone(dropTargetEl, {
ddGroup: dndGroup,
copy: false,
containerScroll: false,
notifyOver: function(dd, e, data)
{
return (data.grid.hasSelection() ? dd.dropAllowed : dd.dropNotAllowed);
},
notifyDrop: function(dd, e, data)
{
var t = this.gridTarget;
var g = data.grid;
if (t !== g && g.hasSelection())
{
var rows = g.selModel.getSelections();
for (var i = 0; i < rows.length; i++)
{
//use addRecord to mark data as dirty to make sure
//we can commit it
gridTarget.addRecord(rows[i].data);
}
g.deleteSelected();
return true;
}
return false;
}
});
ddrow.grid = grid;
ddrow.gridTarget = gridTarget;
}
</script>
Enjoy DD....
Regards,
BOBY GEORGE