Drag/drop between tables with a master grid

[Tareq Perez]

Hello, 

I am trying to get drag and drop between two grids where the source grid does not remove the row on drop. I want to maintain a master list of data and allow the user to drop data from it without modifying that source grid.

 This is my current setup, but on drop it transfers the row from the source grid to the destination grid. Is there a way to maintain the source grid on drop?

<div class="row">
   <div class="col-sm-6">
      <ejs-grid id='DestGrid' #destGrid [dataSource]='practiceModifiers' [allowSelection]="true"
              [allowRowDragAndDrop]="true"
              [selectionSettings]="{ type: 'Multiple' }">
         <e-columns>
            <e-column headerText="Available Modifiers">
               <ng-template #template let-data>
                  <div>
                     <span>{{ data | formatModifierInfo }}</span>
                  </div>
               </ng-template>
            </e-column>
         </e-columns>
      </ejs-grid>
   </div>
   <div class="col-sm-6">
      <ejs-grid id='SourceGrid' #sourceGrid [dataSource]='masterModifiers' [allowSelection]="true"
              [allowRowDragAndDrop]="true" [selectionSettings]="{ type: 'Multiple' }"
              [rowDropSettings]="{ targetID: 'DestGrid' }">
         <e-columns>
            <e-column headerText="Practice Modifiers">
               <ng-template #template let-data>
                  <div>
                     <span>{{ data | formatModifierInfo }}</span>
                  </div>
               </ng-template>
            </e-column>
         </e-columns>
      </ejs-grid>
   </div>
</div>

[Pavithra Subramaniyam]

Hi Tareq, 

 

Greetings from Syncfusion. 

 

We have created a sample based on your requirement. Here, we have maintained rows in source grid while drop the rows on destination grid. Please find the below code example and sample for your reference. 

 

[code example] 

... 

export class DragAndDropComponent implements OnInit { 

  ... 

 public flag: boolean = true;  

 

  ngOnInit(): void { 

    this.srcData = orderDetails; 

    ... 

 } 

 

  rowDrop(args: any) { 

    this.idx = args.fromIndex; 

    this.dta = args.data; 

  } 

 

  rowDragStart(args: any){ 

    this.flag = true; 

  } 

 

  actionBegin(args: any) { 

    if (args.requestType == "rowdraganddrop") { 

      if (this.flag === true) { 

        this.flag = false; 

        this.grid.notify("rows-added", { toIndex: this.idx, records: this.dta }); 

        this.grid.notify('model-changed', { 

          type: 'actionBegin', requestType: 'rowdraganddrop' 

        }); 

      } 

    } 

  } 

 

} 

 

Sample link: https://stackblitz.com/edit/angular-ce9k9j-f82zva?file=drag-and-drop.component.ts  

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.