Drag and drop incorrect work with batch delete

.Mode(Syncfusion.EJ2.Grids.EditMode.Batch) incorrect work with AllowRowDragAndDrop(true).
How to reproduce:
1) Delete row from grid
2) Drag another row

Are these modes incompatible or am I doing something wrong?




@(Html.EJS().Grid("RulesGrid")

.DataSource(dataManager => { dataManager.Url(Url.Action("UrlDatasource")).BatchUrl(Url.Action("BatchUpdateRules")).Adaptor("UrlAdaptor"); })

.Columns(col =>

{

col.Field("Disabled").HeaderText("Disabled").DisplayAsCheckBox(true).EditType("booleanEdit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

col.Field("Schedule").HeaderText("Schedule").ValidationRules(new { required = true }).Add();

col.Field("Symbols").HeaderText("Symbols").ValidationRules(new { required = true }).Add();

col.Field("Groups").HeaderText("Groups & Logins").ValidationRules(new { required = true }).Add();

col.Field("SubAccount").HeaderText("SubAccount").Visible(false).Add();

col.Field("Balance").HeaderText("Balance").Add();

col.Field("Volumes").HeaderText("Volumes").ValidationRules(new { required = true }).Add();

col.Field("Reason").HeaderText("Reason").ValidationRules(new { required = true }).Add();

col.Field("Direction").HeaderText("Direction").ValidationRules(new { required = true }).Add();

col.Field("Types").HeaderText("Types").ValidationRules(new { required = true }).Add();

col.Field("Spread").HeaderText("Spread").ValidationRules(new { required = true }).Add();

col.Field("PositionLifetime").HeaderText("Position Lifetime").ValidationRules(new { required = true }).Add();

col.Field("Delay").HeaderText("Delay").ValidationRules(new { required = true }).Add();

col.Field("TickDelay").HeaderText("Tick Delay").Add();

col.Field("ExtraSlippageChance").HeaderText("Extra Slippage Chance").ValidationRules(new { required = true }).Add();

col.Field("ExtraSlippage").HeaderText("Extra Slippage").ValidationRules(new { required = true }).Add();

col.Field("ChangePrice").HeaderText("Change Price").ValidationRules(new { required = true }).Add();

col.Field("SlippageTolerance").HeaderText("Slippage Tolerance").Add();

col.Field("Comment").HeaderText("Comment").Add();

col.Field("Action").HeaderText("Action").ValidationRules(new { required = true }).Add();

col.HeaderText("Delete").Commands(commands).Add();

}).AllowPaging(false)

.EditSettings(edit => { edit.ShowConfirmDialog(false).ShowDeleteConfirmDialog(true).AllowEditOnDblClick(true).AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Toolbar(new List() { "Add", "Update", "Cancel" })

.AllowSelection(true).AllowRowDragAndDrop(true).Render())



5 Replies 1 reply marked as answer

EU Eugene February 11, 2022 11:36 AM UTC

What i want to do, i need make grid where order of lines is important and lines without primary key.
User can add/delete/move rows, and batch save to server. After succsess, grid will be refresh from server.

I make that grid, but have problem with compability reorder with batch edit.
Also i have problem with drag and drop, it call cancel conformation dialog.



JC Joseph Christ Nithin Issack Syncfusion Team February 11, 2022 02:38 PM UTC

Hi Eugene, 

   Greetings from Syncfusion support. 

    By default, in Batch edit mode, when you perform any CRUD operations you must save the changes before performing any actions to the grid. But in the provided screenshot we can see that you have deleted a row and before saving the changes you are trying to drag a row. This is the root cause for the reported behavior. If you perform drag operation after saving the changes using the update button or cancel the changes by clicking the cancel button the issue will not arise. 

Please get back to us for further details. 

Regards, 
Joseph I. 



EU Eugene February 11, 2022 03:08 PM UTC

It's possible to drag and drop without saving changes? I need to make the reordering to be part of the CRUD changes.


On batchsave, i save all state of table, i not interestring of delete/changes/adding rows separately.

On cancel/succsess i refresh grid.

function beforeBatchSave(args) {

var rows = [];

console.log(this.getRowsObject());

this.getRowsObject().forEach(element => {

if (element.edit === "delete") {

return;

}


if (element.changes !== undefined) {

rows.push(element.changes);

} else {

rows.push(element.data);

}

}

);

console.log(rows);

this.query.params = [];

this.query.addParams('all', rows);

}

Maybe i can complete delete rows marked for delete before drag and drop? (these records no interest to me in the future). As far as i understand this will solve the error above

And another question, can i disable "Unsaved changes will be lost" conformation only for drag and drop?



EU Eugene February 14, 2022 07:43 AM UTC

Update:
Resolve with custom delete row code.

function commandClickDeleteRow(args) {

let closestTr = $(args.target).closest('tr');

let indexOfTr = closestTr.index();

let uid = closestTr[0].getAttribute('data-uid');


this.deleteRow(closestTr[0]);

closestTr[0].remove();

this.editModule.editModule.removeRowObjectFromUID(uid);

this.currentViewData.splice(indexOfTr, 1);


args.cancel = true;

}


Marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team February 14, 2022 10:08 AM UTC

Hi Eugene, 

  Thanks for your update. 

  We are glad that your issue has been resolved. 

  Please get back to us for further details. 

Regards, 
Joseph I. 


Loader.
Up arrow icon