Search results

Row Drag and Drop in Angular Grid component

03 Oct 2022 / 3 minutes to read

The Grid Row drag and drop allows you to drag grid rows and drop to another Grid or custom component. To enable Row drag and drop in the Grid, set the allowRowDragAndDrop to true. The target component on which the Grid rows to be dropped can be set by using targetID.

To use Row Drag and Drop, you need to inject RowDDService in the provider section of AppModule.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid id='Grid' [dataSource]='data' [allowRowDragAndDrop]='true'
                [rowDropSettings]='rowDropOptions' [selectionSettings]='selectionOptions'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>
                <ejs-grid id='DestGrid' [dataSource]='destGridData' [allowRowDragAndDrop]='true'
                [rowDropSettings]='destRowDropOptions' [selectionSettings]='selectionOptions'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`,
    styleUrls: ['./app/app.style.css']
})
export class AppComponent implements OnInit {

    public data: object[];
    public destGridData: object[];
    public rowDropOptions: RowDropSettingsModel;
    public destRowDropOptions: RowDropSettingsModel;
    public selectionOptions: SelectionSettingsModel;

    ngOnInit(): void {
        this.data = data.slice(0, 5);
        this.destGridData = [];
        this.rowDropOptions = { targetID: 'DestGrid' };
        this.destRowDropOptions = { targetID: 'Grid' };
        this.selectionOptions = { type: 'Multiple' };
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, PageService, SelectionService, RowDDService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService, SelectionService, RowDDService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Drag and drop rows without drag icons

You can hide the drag and drop icon when performing a drag and drop operation within the grid. This can be achieved by setting the targetID of the rowDropSettings as the current Grid’s ID.

By setting the targetID, the Grid will render without a helper icon (for row drag). Now you can customize the drag and drop action. To control the drop action, you can bind the rowDrop event of the Grid. In the rowDrop event, you can prevent the default action(args.cancel as true) and reorder the rows using reorderRows method of the Grid.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import {GridComponent, RowDDService, SelectionService} from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<div class="control-section">
                <ejs-grid
                    #grid
                    [dataSource]="data"
                    height="350"
                    [allowRowDragAndDrop]="true"
                    [selectionSettings]="selectOptions"
                    [rowDropSettings]="rowDropOptions"
                    height="400"
                    id="Grid"
                    (rowDrop)="rowDrop($event)"
                >
                    <e-columns>
                        <e-column
                            field="OrderID"
                            isPrimaryKey="true"
                            headerText="Order ID"
                            width="80"
                            textAlign="Right"
                        ></e-column>
                        <e-column
                            field="CustomerID"
                            headerText="Customer Name"
                            width="120"
                        ></e-column>
                        <e-column
                            field="OrderDate"
                            headerText="Order Date"
                            width="100"
                            format="yMd"
                            textAlign="Right"
                        ></e-column>
                        <e-column
                            field="Freight"
                            headerText="Freight"
                            width="120"
                            format="C2"
                            textAlign="Right"
                        ></e-column>
                        <e-column
                            field="ShipCity"
                            headerText="Ship City"
                            width="130"
                        ></e-column>
                        <e-column
                            field="ShipCountry"
                            headerText="Ship Country"
                            width="130"
                        ></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
`,
providers: [RowDDService, SelectionService],
    styleUrls: ['./app/app.style.css']
})
export class AppComponent {
    public data: Object[] = [];
    public selectOptions: Object;
    public rowDropOptions: object;
    @ViewChild('grid') public grid: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.selectOptions = { type: 'Multiple' };
        this.rowDropOptions = { targetID: 'Grid' };
    }
    rowDrop(args) {
        args.cancel = true;
        var value = [];
        for (var r = 0; r < args.rows.length; r++) {
            value.push(args.fromIndex + r);
        }
        this.grid.reorderRows(value, args.dropIndex);
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, PageService, SelectionService, RowDDService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService, SelectionService, RowDDService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
  • Selection feature must be enabled for row drag and drop.
  • Multiple rows can be selected by clicking and dragging inside the grid. For multiple row selection, the type property must be set to Multiple.

Limitations

  • Multiple rows can be drag and drop in the row selections basis.
  • Single row is able to drag and drop in same grid without enable the row selection.
  • Row drag and drop feature is not having built in support with sorting, filtering, hierarchy grid and grouping features of grid.