How to achieve drag and drop the rows in Grid with custom data binding?

1 min read

This article explains how to achieve drag-and-drop functionality for rows in a Grid with custom data binding. You can perform row drag-and-drop in the Angular Grid with custom data by passing details such as the from index, drop index, selected records, and selected row indexes to the custom service. You can retrieve these details in the 'rowDrop' event and pass them in the 'dataStateChange' event.

This is demonstrated in the sample code below, where the row drag-and-drop feature is enabled in the Grid component with custom data. The row drag-and-drop details have been stored in the 'dropState' variable using the 'rowDrop' event and passed to the service inside the 'dataStateChange' event.

@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 };

    }

}

Refer to the working sample for additional details and implementation: Sample

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, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to achieve drag and drop the rows in Grid with custom data binding?

Conclusion

Access denied