Need to persist row drag and drop to database

[R Brian Lindahl]

A while back, with a previous version of the SyncFusion controls and in asp.net MVC, I designed a web page that allowed drag & drop sorting of rows, and had a handler on the controller connected like 

<e-row-drop-settings drop-mapper="/MixLineSort/RowDropHandler" />

in order to persist the SortOrder field to the database, and return a list of changed items to the grid. Each record has a SortOrder field, and the grid is sorted by that field. 

How do I do this in the current asp.net core/razor environment? I don't see anything in the documentation about server-side events. Is it possible to do it from javascript, i.e., changing the field value in the row objects and having that get posted back to the server? 

[Vasanthakumar K]

Hi R Brian Lindahl,

Greetings from Syncfusion support.

Query: Need assistance to persist EJ2 Grid row Drag and Drop order in the back-end database in Razor Core environment?

When using the Syncfusion EJ2 Grid with remote data, the default behavior is that row drag-and-drop updates only the row order in the UI (front-end). These changes are not automatically saved to the backend (server) or the database.

If you want to persist the new row order in the backend, you can use the rowDrop event. This event gets triggered whenever a row is dragged and dropped, providing details such as:

• Which row was dragged (source data).
• Where the row was dropped (target index).

Here’s how you can persist these changes:

1. Capture the Drag-and-Drop Event: The rowDrop event captures the dragged row and the new position where it was dropped.
2. Send the Updated Data to the Server: Use an AJAX or fetch call to send the updated row order and index to the backend.
3. Update the Database on the Server: Process the received data on the server to reorder the rows in the database based on the drag-and-drop operation.
4. Refresh the Grid (Optional): After the database is updated, you can refresh the grid to reflect the persisted order, ensuring synchronization between the UI and the backend.

Key Points for the Customer:

1. Default Behavior: Drag-and-drop changes are local to the UI unless explicitly handled.
2. Persistence: Use the rowDrop event to send updates to the server.
3. Server Update: The backend must handle the reordering logic to update the database.
4. Consistency: Refresh the grid if needed to ensure the UI reflects the updated order in the database.

For more information,

• Refer to the Drag and drop event documentation.
• Same query Forum reference: Drag and Drop order persisting in the database | Angular - EJ 2 Forums | Syncfusion®
• Sample: Please find the attachment.

[cshtml code example]

<ejs-grid id="Grid" . . . . . allowRowDragAndDrop="true" rowDrop="rowDrop">

    . . . . . .

</ejs-grid>

<script>

   // new dropped data object array

   var newDestGridData = [];

   // trigger when dragged rows able to drop on target

   function rowDrop(args) {

      // concat and maintain all newly dropped data object array

      newDestGridData = newDestGridData.concat([].slice.call(args.data));

      var ajax = new ej.base.Ajax({// used our ajax/fetch to send the re-ordered row required to persist Data on server db.

            url: "/Index?handler=RowDropped",

            type: "POST",

            contentType: "application/json",

            beforeSend: function (req) {

                req.httpRequest.setRequestHeader('XSRF-TOKEN', $('input:hidden[name="__RequestVerificationToken"]').val());

            },

            data: JSON.stringify({ data: newDestGridData, dropIndex: args.dropIndex }) // send all maintained newly dropped data to controller.

        });

        ajax.send().then(function (data) {

        }).catch(function (xhr) {

            console.log(xhr);

        });

        newDestGridData = []; // cleared maintained newly added data after sent to controller.

   }

</script>

[cs code example]

public class RowDrop

{

    public RowDrop() { }

    [Key]

    [JsonProperty("data")]

    public List<WorkOrder> data { get; set; }

    [JsonProperty("dropIndex")]

    public int dropIndex { get; set; }

}

public void OnPostRowDropped([FromBody] RowDrop value)

{

    //update db here

    for (int i = 0; i < value.data.Count; i++)

    {

        WorkOrders.Remove(WorkOrders.Where(or => or.Id == value.data[i].Id).FirstOrDefault());

        WorkOrders.Insert(value.dropIndex, value.data[i]);

    }

}

Regards,

Vasanthakumar K

Attachment: 195656razorrowddpersistdborder_d836fd13.zip