How to achieve drag and drop the rows in Grid with custom data binding?
You can perform row drag and drop in Angular Grid with custom data by passing the details such as from index, drop index, selected records, selected row indexes to the custom service. You can get these details in ‘rowDrop’ event and pass in ‘dataStateChange’ event.
This is demonstrated in the below sample code in which the row drag and drop feature is enabled in Grid component having custom data. The row drag and drop details has been stored in ‘dropState’ variable using ‘rowDrop’ event and passed to the service inside the ‘dataStateChange’ event.
TS
@Component({
selector: 'app-root',
templateUrl: ` <ejs-grid #grid [dataSource]='data | async' allowPaging= 'true' [allowRowDragAndDrop]='true' [selectionSettings]='selectOptions' [pageSettings]='pageOptions' (dataStateChange)= 'dataStateChange($event)' (rowDrop)="rowDrop($event)">
<e-columns>
<e-column field= "OrderID" headerText="Order ID" width="130" ></e-column>
<e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column>
<e-column field= "ShipName" headerText="Ship Name" width="200"></e-column>
<e-column field= "ShipCity" headerText="Ship City" width="150"></e-column>
</e-columns>
</ejs-grid> `,
})
export class AppComponent {
public data: Observable<DataStateChangeEventArgs>;
public pageOptions: Object;
public state: DataStateChangeEventArgs;
public selectOptions: Object = { type: 'Multiple' };
public dropState:any;
constructor( private service: OrdersService) {
this.data = service;
}
public dataStateChange(state: DataStateChangeEventArgs): void {
Object.assign(state,this.dropState);
this.service.execute(state);
this.dropState ={};
}
@ViewChild('grid',{static:true})
public grid: GridComponent;
public ngOnInit(): void {
this.pageOptions = { pageSize: 10, pageCount: 4 };
let state = { skip: 0, take: 10 };
this.dropState ={};
this.service.execute(state);
}
rowDrop(e){
let indeces = [];
e.rows.filter((e)=>{indeces.push(e.rowIndex)})
this.dropState = { fIdx: e.fromIndex, dIdx: e.dropIndex, idxs: indeces, data: e.data };
}
}
Sample:https://stackblitz.com/edit/angular-rowdd-async-pipe-cxzyf3?file=order.service.ts
Conclusion
I hope you enjoyed learning about how to achieve drag and drop the rows in Grid with custom data binding.
You can refer to our Angular Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
