|
@{
ViewData["Title"] = "Home Page";
}
<div style="float:left;width:50%">
<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.data" databound="databound" >
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70" ></e-column>
..
</e-columns>
<e-selection-settings selection-mode="@(new List<string>(){"cell"})"></e-selection-settings>
</ej-grid>
</div>
<div style="float:right;width:49%">
<ej-grid id="DestGrid" allow-paging="true" datasource="ViewBag.data" databound="databound1">
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70" ></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="80" ></e-column>
<e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column>
<e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C2}" width="75"></e-column>
</e-columns>
<e-selection-settings selection-mode="@(new List<string>(){"cell"})"></e-selection-settings>
</ej-grid>
</div>
<script type="text/javascript">
function databound(args) {
var $draganddropEle = $(this.getRows()).find("td");
var proxy = this;
$draganddropEle.ejDraggable({
cursorAt: { top: -8, left: -8 },
helper: function (event, ui) {
this.clone = true;
var td = $(event.element), $td = td.clone();
var $visualElement = ej.buildTag('div.e-cloneproperties e-draganddrop e-grid', "", { 'height': 'auto', 'z-index': 2, 'position': 'absolute', 'width': 'auto' });
$visualElement.append($td).append("<td style='display:none'>" + proxy._id + "</td>");
return $visualElement.addClass("e-dragclone").appendTo(proxy.element);
},
dragStop: function (args) {
if (!args.element.dropped) {
$(".e-dragclone").remove();
}
}
});
$draganddropEle.ejDroppable({
accept: $draganddropEle,
drop: function (event, ui) {
var $target = $(event.target), srcControl, rowIndex, cellIndex, selectedCellTxt = ui.helper.find("td").first().text();
rowIndex = $target.closest("tr").index();
cellIndex = $target.index();
srcControl = $("#" + proxy._id).ejGrid("instance");
srcControl.setCellText(rowIndex, cellIndex, selectedCellTxt);
}
});
}
function databound1(args) {
var $draganddropEle1 = $(this.getRows()).find("td");
var proxy = this;
$draganddropEle1.ejDraggable({
..
});
$draganddropEle1.ejDroppable({
..
srcControl.setCellText(rowIndex, cellIndex, selectedCellTxt);
}
});
}
</script> | 
