Drag and Drop order persisting in the database

[Jonas Blazinskas]

Hi, I have not found a demo anywhere of how to persist the order of dragging and dropping a row inside a single grid that has been sorted permanently by the incremental order column.

https://codesandbox.io/s/geurideu-nae-deuraegeuaendeurob-sunseobyeongyeong-forked-5rxec
this is the closest example I found but it is on Vue and is buggy as well because sometimes you can set the order of 2 items to be 3 or 1 for example.

I would appreciate if you could point me in the right direction in updating rows with correct order numbers that then I could save in my database on action complete or something similar.

[Rajapandiyan Settu]

Hi Frank,

Thanks for contacting Syncfusion support.

When binding the remote data to the Grid, performing row drag and drop in the Grid will change the row only in UI part. It does not affect the changes in server. This is the behavior of Grid.

If you want to change the row position at the server too, You can use the rowDrop event of Grid.

rowDrop: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdrop

In the below code, we send dragged row and dropped index details to server through the ajax post. Then we perform the reordering on the server side based on the rowDrop event arguments(from and drop index). In the same way, you can change the row position in the server.

Once the action is done, you can bind the updated data to the Grid or refresh the Grid to get the updated data.

 

   rowDrop(args) {

        var grid = document.getElementByID('Grid').ej2_instances[0];

        args.cancel = true; // prevent the default action

        let ajax = new Ajax();

        ajax.type = "POST"

        ajax.url = "Home/Move"

        let moveposition = { oldIndex: args.fromIndex, data: args.data, newIndex: args.dropIndex };

        ajax.data = JSON.stringify(moveposition);

        ajax.send();

        ajax.onSuccess = () => {

            grid.refresh();  // refresh the Grid once the action is done

        }

    }

 

Server side:

 

 public void Move([FromBody]values data)

        {

            // you can also change the position of your data based on the from and drop index 

            var tmp = OrdersDetails.GetAllRecords()[data.oldIndex]; 

            OrdersDetails.GetAllRecords()[data.oldIndex] = OrdersDetails.GetAllRecords()[data.newIndex]; 

            OrdersDetails.GetAllRecords()[data.newIndex] = tmp; 

 

        }

 

Please get back to us, if you need further assistance.

Regards,

Rajapandiyan S