We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).Adaptor(AdaptorType.RemoteSaveAdaptor)) .AllowSorting() .AllowPaging() .SelectionType(SelectionType.Single) .AllowRowDragAndDrop() .RowDropSettings(drop => drop.RowDropMapper("RowDropHandler").DropTargetID("#DestGrid")) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(55).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(70).Add(); col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(70).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(55).Add(); }) .ClientSideEvents(eve => { eve.RowDrag("rowDrag").RowDragStart("rowDragStart").RowDrop("rowDrop").ActionComplete("complete"); })
Hello,I am using the syncfusion grid. I am using row drag and drop feature to drag and drop row in the same grid at a different position.I am facing an issue which is also reproducible in your sample which is installed when we install syncfusion.Below is the issue description:So if i select the row Row 5 and drag to row 2 (when we drag this row will be highlighted) which is dragging row upwards then 5th row will be moved to 2nd position which is working as expected.But now if i select the row 2 to drag at row 5( n this case also before dropping this 5th row will be highlighted) which is dragging downwards then row seems to set on one index up which is 4th row instead of highlighted 5 row.Also because of this issue, we can't drag any row at the last index.So is there any way i can achieve the same behaviour as we are dragging upwards in the case of dragging downwards.This is a sample snippeat of the grid from your sample of a grid in row drag and drop@(Html.EJ().Grid<OrdersView>("Grid").Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).Adaptor(AdaptorType.RemoteSaveAdaptor)) .AllowSorting() .AllowPaging() .SelectionType(SelectionType.Single) .AllowRowDragAndDrop() .RowDropSettings(drop => drop.RowDropMapper("RowDropHandler").DropTargetID("#DestGrid")) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(55).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(70).Add(); col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(70).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(55).Add(); }) .ClientSideEvents(eve => { eve.RowDrag("rowDrag").RowDragStart("rowDragStart").RowDrop("rowDrop").ActionComplete("complete"); })
|
<div>
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).Adaptor(AdaptorType.RemoteSaveAdaptor))
.AllowSorting()
.AllowPaging()
.SelectionType(SelectionType.Multiple)
.AllowRowDragAndDrop()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(55).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(70).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(70).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(55).Add();
})
.ClientSideEvents(eve => { eve.RowDrop("rowDrop"); })
)
</div>
<script type="text/javascript">
function rowDrop(args) {
args.cancel = true; // to cancel the default action
var dataSource = this.model.dataSource.dataSource.json.slice(); // take clone of dataSource
dataSource.splice(args.target.closest("tr").index(), 0, dataSource.splice(args.rows.index(), 1)[0]) // to remove the insert the target record at specific index
this.dataSource(ej.DataManager(dataSource)); // update the dataSource.
$(".e-dragclone").remove();
}
</script> |
|
<div>
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).Adaptor(AdaptorType.RemoteSaveAdaptor))
.AllowSorting()
.AllowPaging()
.SelectionType(SelectionType.Multiple)
.AllowRowDragAndDrop()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(55).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(70).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(70).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(55).Add();
})
.ClientSideEvents(eve => { eve.RowDrop("rowDrop"); })
)
</div>
<script type="text/javascript">
function rowDrop(args) {
args.cancel = true; // to cancel the default action
var dataSource = this.model.dataSource.dataSource.json.slice(); // take clone of dataSource
dataSource.splice(args.target.closest("tr").index(), 0, dataSource.splice(args.rows.index(), 1)[0]) // to remove the insert the target record at specific index
this.dataSource(ej.DataManager(dataSource)); // update the dataSource.
$(".e-dragclone").remove();
}
</script> |
|
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).Adaptor(AdaptorType.RemoteSaveAdaptor))
.AllowSorting()
.AllowPaging()
.SelectionType(SelectionType.Multiple)
.AllowRowDragAndDrop()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(55).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(70).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(70).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(55).Add();
})
.ClientSideEvents(eve => { eve.RowDrop("rowDrop"); })
)
</div>
<script type="text/javascript">
var droppedrow,droppedrowIndex,targetRow,targetRowIndex, proxy;
function rowDrop(args) {
args.cancel = true; // to cancel the default action
proxy = this;
droppedrow = args.rows; // draggable Row
droppedrowIndex = args.rows.index(); // draggable Row Index
targetRow = args.target.closest("tr") // target Row
targetRowIndex = args.target.closest("tr").index(); // target Row Index
var dataSource = this.model.dataSource.dataSource.json.slice(); // take clone of dataSource
dataSource.splice(args.target.closest("tr").index(), 0, dataSource.splice(args.rows.index(), 1)[0]) // to remove the insert the target record at specific index
this.dataSource(ej.DataManager(dataSource)); // update the dataSource.
$(".e-dragclone").remove(); // remove the clone element
$.ajax({
type: "POST",
url: "/Grid/DragDetails",
datatype: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({"targetid" : targetRowIndex, "draggableid" : droppedrowIndex}),
success: function (result) {
proxy.selectRows(targetRowIndex);
},
});
}
</script>
// Server Side
public void DragDetails(int targetid, int draggableid)
{
// do your stuff here.
}
|
