Hi,
EnableDragDrop works with RowSelectionModel only.
You have to use custom DragZone to work with CellSelectionModel
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] {"Cell1_1", "Cell1_2", "Cell1_3" },
new object[] {"Cell2_1", "Cell2_2", "Cell2_3" },
new object[] {"Cell3_1", "Cell3_2", "Cell3_3" }
};
}
}
</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 runat="server">
<title></title>
<script type="text/javascript">
function getDragData(e){
var grid = GridPanel1,
t = Ext.lib.Event.getTarget(e),
rowIndex = grid.view.findRowIndex(t),
cellIndex = grid.view.findCellIndex(t);
if(!this.ddel){
this.ddel = document.createElement('div');
this.ddel.className = 'x-grid-dd-wrap';
}
if(rowIndex !== false && cellIndex !== false){
var sm = grid.selModel,
cell = sm.getSelectedCell();
if(!cell || cell[0] != rowIndex || cell[1] != cellIndex || e.hasModifier()){
sm.handleMouseDown(grid, rowIndex, cellIndex, e);
}
return {
grid: grid,
ddel: this.ddel,
rowIndex: rowIndex,
cellIndex: cellIndex,
cell: sm.getSelectedCell(),
record: grid.store.getAt(rowIndex),
field : grid.getColumnModel().getDataIndex(cellIndex)
};
}
return false;
}
function onInitDrag(e){
var data = this.dragData;
this.ddel.innerHTML = String.format("[{0},{1}]", data.cellIndex, data.rowIndex);
this.proxy.update(this.ddel);
}
function dropCell(ddSource, e, data){
Ext.get("dropDiv").dom.innerHTML = String.format("<p>CellIndex:{0}, RowIndex:{1}</p>", data.cellIndex, data.rowIndex);
}
</script>
<style type="text/css">
#dropDiv{
width:400px;
height:100px;
border:3px solid black;
margin:10px;
text-align:center;
}
#dropDiv p{
line-height:100px;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" ScriptMode="Debug" />
<ext:GridPanel
ID="GridPanel1"
StyleSpec="margin:10px;"
runat="server"
Title="Grid"
Width="400"
Height="150"
>
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="cell1" />
<ext:RecordField Name="cell2" />
<ext:RecordField Name="cell3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Cell1" DataIndex="cell1" />
<ext:Column Header="Cell2" DataIndex="cell2" />
<ext:Column Header="Cell3" DataIndex="cell3" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
</ext:GridPanel>
<div id="dropDiv">
<p>Drop on me</p>
<ext:DragZone runat="server" Target="={#{GridPanel1}.view.scroller}" Group="CellDD">
<GetDragData Fn="getDragData" />
<OnInitDrag Fn="onInitDrag" />
<AfterRepair Handler="this.dragging = false;" />
<GetRepairXY Handler="return false;" />
</ext:DragZone>
<ext:DropTarget runat="server" Target="dropDiv" Group="CellDD">
<NotifyDrop Fn="dropCell" />
</ext:DropTarget>
</body>
</html>