Reorder rows and save to backend

[Stephan Schrade]

Hi support,

I'm using your grid with drag drop allowed.

I can drop a row to a new position and then the row drop event is called.

For saving the data to the backend it would be very easy, if I could get the new order of the rows directly from the grid, rather than to work with fromIndex and dropIndex which is provided by the event arguments.

I have tried to achieve this by calling grid.getCurrentViewRecords()

If I inspect this with console.log, I do get an array with the row objects in the new order.

But if I loop through this array to create a new array with my primary key (to send it to the backend via ajax), this order is lost.

What can I do?

Is there another way to get the new order of the rows of the grid?

This is the console.log of getCurrentViewRecords

Array (6)

0 {challengegroupjctchallengeid: 367, challengegroupid: 15, challengetypeid: 126, content: "", pos: 2, …}

1 {challengegroupjctchallengeid: 366, challengegroupid: 15, challengetypeid: 127, content: "", pos: 3, …}

2 {challengegroupjctchallengeid: 365, challengegroupid: 15, challengetypeid: 128, content: "", pos: 4, …}

3 {challengegroupjctchallengeid: 364, challengegroupid: 15, challengetypeid: 129, content: "", pos: 5, …}

4 {challengegroupjctchallengeid: 363, challengegroupid: 15, challengetypeid: 130, content: "", pos: 6, …}

5 {challengegroupjctchallengeid: 368, challengegroupid: 15, challengetypeid: 123, content: "", pos: 1, …}

This is my code

function actionRowDrop(args) {

// args.cancel = true;

let rowdata = [];

let records = destGrid.getCurrentViewRecords();

let j = 0;

for (let i = 0; i < records.length; i++) {

rowdata[j] = records[i].challengegroupjctchallengeid;

j++;

};

console.log(rowdata);

ajax = new ej.base.Ajax();

ajax.type = "POST";

ajax.url = "ctreorder";

moveposition = { rowdata: rowdata, <?= Yii::$app->request->csrfParam; ?>: '<?= Yii::$app->request->csrfToken; ?>' };

ajax.data = JSON.stringify(moveposition);

ajax.send();

ajax.onSuccess = () => {

destGrid.refresh();

}

}

Looping with forEach() doesn't work either.

Regards,

Stephan

[Rajapandi Ravi]

Hi Stephan,

Greetings from Syncfusion support

By default, in EJ2 Grid we do not have the server-side support for the Row Drag and Drop feature. To perform server-side row drag and drop operation in Grid, we suggest you use the rowDrop event of EJ2 Grid.  When binding the remote data to the Grid, performing row drag and drop in the Grid will changes 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 server too, you can use the rowDrop event of Grid. From validating your shared code example, we could see that you are using getCurrentViewRecords method and try to send to the server. We would like to inform you that you can’t get the new order of the re-ordered records in the getCurrentViewRecords method, so using this method is not a proper way to pass the record to the server-side. For your reference, please refer the below screenshot.

In this below screenshot, we have dropped the 10249 row to the 10248 and inside the rowDrop event we have invoked the getCurrentViewRecords method but it was returns not returns the new order.

So, you can perform the reordering in 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. Please refer the below code example and sample for more information.

 

   rowDrop: function (args) { //rowDrop event of Grid

            args.cancel = true; //we must prevent the default action here

            let ajax = new ej.base.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

            }

 

        }

Sample:

Screenshot:

Regards,

Rajapandi R

Attachment: 187488sample_846c745c.zip

[Brown Emma]

Make sure you don't use any sort that accidentally changes Suika game the order, and iterate through the correct array. Once you have the orderedIds, you can send them via AJAX.