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. Image for the cookie policy date
close icon

Row Drag and Drop Downwards is not working as Row drag on upwards

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"); })



13 Replies

VN Vignesh Natarajan Syncfusion Team November 27, 2018 02:11 PM UTC

Hi Sandip, 
 
Thanks for using Syncfusion support.  
 
Query: “ I am using row drag and drop feature to drag and drop row in the same grid at a different position. 
 
From your query, we understand that you need drop the record at the position where you are dropping the row. It is default behavior of the Grid to drop the dragged row one index before the dropped row element. So if you drag and drop a row another row, it will be dropped before that element by one index.      
 
Regards, 
Vignesh Natarajan 
 



SA Sandip November 28, 2018 04:39 PM UTC

HI, I think you misunderstood the issue.
there are 2 different behaviours when you drag and drop the rows upwards and downwards. Below are the steps to reproduce

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( In 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.


Can we make this 2 behaviour consistent especially dragging row downwards?


VN Vignesh Natarajan Syncfusion Team November 29, 2018 02:47 PM UTC

Hi Sandip, 
 
Thanks for the update. 
 
By Default when a row is dragged and dropped one specific row, then it will be dropped one index before the dropped row.  
 
While dragging the row (bottom to up) from 5th index to 2nd index you will drop the element at 2nd index. Now dropped row replaces the 2nd index because element from 5th index is removed and placed at 2nd Index. 
 
Similarly when row is dragged from top to bottom, 2nd index to 5th index row element from 2nd index is taken and placed before the dropped row (i.e) if dropped on 5th index it will be placed in 4th position (as mentioned by you). Because while dragging from top to bottom, row from 2nd position also considered and so row is dropped one index before the dropped row.  
 
Kindly refer the below video demonstration for your reference 
 
 
 
If we still misunderstood your query,  kindly share the video demonstration to replicate the reported issue at our end.   
 
 
Regards, 
Vignesh Natarajan 



MT Maurice Thompson replied to Sandip November 29, 2018 02:59 PM UTC

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"); })



Hi,

I'm having the exact same issue, dragging items up is perfect and works as expected. When I drag an item down, you have to drop it 2 indexes down to move it down 1 index??? ... this also means its impossible to drag an item to the last index.

Is the source available in the community edition so I can take a look at fixing it myself?

Thanks
Maurice


SA Sandip November 29, 2018 03:03 PM UTC

if this is the case then we won't be able to drag row a last index while dragging downwards ? is there any way to fix this issue then?


VN Vignesh Natarajan Syncfusion Team December 3, 2018 12:25 PM UTC

Hi Maurice, 

Thanks for the patience. 

Query: “this also means its impossible to drag an item to the last index.” 

We have achieved your requirement to drop the record at the last index using RowDrop event of ejGrid. In that event we have taken the dataSource and removed the dragged records from its index and pushed to dropped row index. We have updated the modified data to Grid using dataSource method.  

Refer the below code example.  

<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> 

For your convenience we have prepared a sample which can be downloaded from below link 


Note: this will work only for local dataSource. 

Refer our help documentation for your reference 



Query2: “Is the source available in the community edition so I can take a look at fixing it myself?” 

To provide source code we need are checking with our sales team. You can also contact our sales team mail ID   sales@syncfusion.com 
Regards,
Vignesh Natarajan 



VN Vignesh Natarajan Syncfusion Team December 3, 2018 12:26 PM UTC

Hi Sandip, 

Thanks for the patience. 

Query: “is there any way to fix this issue then? 

We have achieved your requirement to drop the record at the last index using RowDrop event of ejGrid. In that event we have taken the dataSource and removed the dragged records from its index and pushed to dropped row index. We have updated the modified data to Grid using dataSource method.  

Refer the below code example.  

<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> 

For your convenience we have prepared a sample which can be downloaded from below link 


Note: this will work only for local dataSource. 

Refer our help documentation for your reference 



Regards,
Vignesh Natarajan 
 



SA Sandip December 3, 2018 05:00 PM UTC

Hi this is working fine. but row reordering event is not firing in actionComplete which we are depending to update the row order based on that event. 


VN Vignesh Natarajan Syncfusion Team December 4, 2018 12:36 PM UTC

Hi Sandip, 

Thanks for the update. 

Query :- row reordering event is not firing in actionComplete 

From the solution provided in previous update, we have prevented the default action by defining the args.cancel as true in RowDrop event of ejGrid. So further actions related to rowDrop event doesn’t occur. So the reported problem occurs on actionComplete event.  

To overcome this problem, kindly share the following details. 

  1.  What type of actions you need to perform on actionComplete event. We can try to achieve your requirement on this RowDrop event. So kindly share more details regarding the actions you need to perform in the actionComplete event.

  1. Exact scenario you need to achieve.

Regards, 
Vignesh Natarajan 
 



SA Sandip December 6, 2018 12:28 PM UTC

This is what I am achieving in the reordering event.  i am finding which row is dropped at which index and based on that i have to pass that data to a server.
Also just noticed that it doesn't highlight a row where i am going to drop after above approach on row drop can we have that highlighting as well?


if (args.action == "rowReordering" && args.requestType == "refresh") {

            if (args.records.length > 0) {
                if (args.dropDetails.DestinationRowIndex != args.draggedRowIndexes[0]) {

                    var destinationRowIndex = args.dropDetails.DestinationRowIndex;
                    var draggablesourceRowIndex = args.draggedRowIndexes[0];
                    // this is to handle if they have dropped below current row index and grid is giving 1 more index so solving that
                    if (destinationRowIndex > draggablesourceRowIndex) {
                        destinationRowIndex = destinationRowIndex - 1;
                    }

                    var dataToPass = {
                        productId: args.records[0].ProductId,
                        id: args.records[0].Id,
                        index: destinationRowIndex
                    }

                    $("#GridProductSpecialInstruction").ejWaitingPopup("show")//show popup s
                    mrp.util.ajaxPost("/Products/ReorderProductSpecialInstruction", dataToPass,
                        function (response) {
                            if (response.Success) {
                                $("#GridProductSpecialInstruction").ejWaitingPopup("hide")//show popup s
                            } else {
                                $("#GridProductSpecialInstruction").ejWaitingPopup("hide")//show popup s
                                mrp.util.showError(response.Error);
                            }
                        });
                }
            }
        }


VN Vignesh Natarajan Syncfusion Team December 7, 2018 01:55 PM UTC

Hi Sandip, 
 
Query : iam finding which row is dropped at which index and based on that I have to pass that data to server. Also just noticed that it doesn’t highlight a row where I am going to drop after above approach on row drop can we have that highlighting as well 
 
Thanks for sharing the details. 
 
From your update, we suspect that you need to get the dragged rowIndex , dropped rowIndex  and select rows. We have achieved your requirement in rowDrop event. 
 
Please refer the below code example and sample link. 
 
   @(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. 
       } 
 
 
 
Regards, 
Vignesh Natarajan. 
 



SA Sandip December 7, 2018 08:30 PM UTC

Thanks for providing an update.
this doesn't solve my first issue of the issue when we are dragging downwards. can you read the whole conversion you will get an idea. my initial requirement is now not satisfied with this change.


VN Vignesh Natarajan Syncfusion Team December 10, 2018 01:51 PM UTC

Hi Sandip, 

Query: this doesn't solve my first issue of the issue when we are dragging downwards. 
 
We are unable to reproduce the reported issue at our end. For your convenience we have created the video demonstration please refer the below link, 

After referring the sample still, facing the issue please get back to us with the following details. 

  1. Share the video demo Or screenshot for the issue.
  2. If possible reproduce the issue in the provided sample and revert us back.
  3. Please confirm whether are you done any other changes in the sample. If yes, please share that details.

Regards, 
Vignesh Natarajan 

 


Loader.
Live Chat Icon For mobile
Up arrow icon