[Custom drag and drop logic]

[Ciprian-Catalin]

Hello,

I'm using the grid with the drag and drop functionality and I want to restrict the user to move the row more than one position away.

- If the user moves the row only one position away, there is some a custom logic which makes a swap between a property of the rows.

- If the user wants to move the row more than one position away, when he drops the row at the new position, the drop functionality should left that row at the initial position

This is my current implementation, but preventDefault, stopPropagation and return aren't working:

onRowDrop(args: any) {

    const newData = [...this.modalDataGridSource];

    const draggedRow = newData[this.draggedRowIndex];

    const droppedRow = newData[args.dropIndex];

   

    if (Math.abs(args.fromIndex - args.dropIndex) === 1) {

      const draggedProgr = draggedRow.progr;

      draggedRow.progr = droppedRow.progr;

      droppedRow.progr = draggedProgr;

      newData.splice(this.draggedRowIndex, 1);

      newData.splice(args.dropIndex, 0, draggedRow);

      this.modalDataGridSource = newData.map((row, index) => ({...row, index}));

    } else if (Math.abs(args.fromIndex - args.dropIndex) > 1) {

// here I want to restrict the user to move the row more than one position

      args.preventDefault();

      args.stopPropagation();

      return;

    }

  }

The issue now is that for the case when the user moves a row more than one position, I can't disable the default behavior of the drag and drop functionality to leave the row at the initial position. Do you have any suggestions on how to solve this?

[Ciprian-Catalin]

Hi guys, 
Any updates on this?

[Hemanthkumar S]

Hi Ciprian-Catalin,

Query: I can't disable the default behavior of the drag and drop functionality

After reviewing the information you provided, we understand that you want to prevent the default behavior of the drag and drop functionality. We have created a sample based on your update and recommend setting args.cancel to true. This will help you to prevent the default drop functionality of the Grid in the rowDrop event, where you want to prevent it.

For more information, please refer to the below code example and sample.

[app.component.html]

  <ejs-grid

    [dataSource]="data"

    height="350"

    [allowRowDragAndDrop]="true"

    [selectionSettings]="selectOptions"

    height="400"

    (rowDrop)="rowDrop($event)"

  >

 

[app.component.ts]

  rowDrop(args: any): any {

    args.cancel = true;

  }

 

Sample: https://stackblitz.com/edit/angular-twth9b?file=src%2Fapp.component.html,src%2Fapp.component.ts

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

[Ciprian-Catalin]

it works, thank you

[Suganya Gopinath]

Hi Ciprian, 

We are glad that the provided solution helped to solve the issue. 

We are marking this forum as solved. 

Regards,

Suganya Gopinath.