Smart Grid Drag and Drop Support

The Smart Grid can act as both a drop source and a drop target. As a drop source, it will allow the user to drag a row to any drop target (Smart Grid or otherwise).

As a drop target, it supplies an easy way for handling drop events of rows from other Smart Grids.

Smart Grid as a Drop Source

Using JSON Layouts

To configure a Smart Grid as a drop source using a JSON layout, simply set the “allowDrag” property to true.

{
            "SalesRepGrid": {
                "componentType": "grid",
                "componentOptions": {
                    "allowDrag": true,
                    "gridLayout": {
                        "height": 400,
                        "pageSize": 10,
                        "columns": [
                            {
                                "field": "RepName"
                            }
                        ]
                    },
                    "dataSource": "SalesRepDataSource",
                    "objectName": "SalesRepGrid"
                }
            }
}

Using HTML layouts

  <smart-grid
        [smart-instance-name]="'SalesRepGrid'"
        [smart-data-source]="'SalesRepDataSource'"
        [smart-grid-layout]="frontend://assets/salesrep-grid.layout.json"
        [smart-grid-allow-drag]="true">
  </smart-grid>

Smart Grid as a Drop Target

Using JSON Layouts

To configure a Smart Grid as a drop target using JSON layouts, the following settings should be applied:

Setting	Value

Setting	Value
allowDrop	true
dropSource	the instance name of the Smart Grid that is configured as a drop source
dataDropHandler	the name of the method, as defined within the parent Smart Form, to be called when a row is dropped
dragHandleIconClass	the webfont CSS class name that should be used to provide the drag handle icon (for example, “fa fa-move”). Default: “k-icon k-i-hand”

{
          "CustomerGrid": {
                "componentType": "grid",
                "componentOptions": {
                    "gridLayout": "frontend://assets/customers-grid.layout.json",
                    "dataSource": "CustomerDataSource",
                    "objectName": "CustomerGrid",
                    "allowDrop": true,
                    "dropSource": "SalesRepGrid",
                    "dataDropHandler": "handleSalesrepDrop",
                    "dragHandleIconClass": "fa fa-move"
                }
            }
}

Using HTML Layouts

    <smart-grid
        [smart-instance-name]="'CustomerGrid'"
        [smart-data-source]="'CustomerDataSource'"
        [smart-grid-layout]="'frontend://assets/customers-grid.layout.json"
        [smart-grid-allow-drop]="true"
        [smart-grid-drop-source]="'SalesRepGrid'"
        [smart-grid-data-drop-handler]="handleSalesrepDrop"
        [smart-grid-drag-handle-iconclass]="'fa fa-move'">
    </smart-grid>

Smart Grid Drop Source with a Generic Drop Target

  <smart-grid
        [smart-instance-name]="'SalesRepGrid'"
        [smart-data-source]="'SalesRepDataSource'"
        [smart-grid-layout]="frontend://assets/salesrep-grid.layout.json"
        [smart-grid-allow-drag]="true">
  </smart-grid>
  
  <div *ngIf="gridDropTargetId" style="height: 400px; width: 400px" id="dropzone" [smart-drag-drop-target]="gridDropTargetId" (onDropped)="handleCustomerDrop($event)">
    <textarea class="k-textbox" style="height: 400px; width: 400px;" [ngModel]="customer | json"></textarea>
  </div>

    customer?: any;
    gridDropTargetId: string;

    constructor(private gridRegistry: SmartGridRegistryService,
                injector: Injector) {
                    super(injector);
                }

    handleCustomerDrop(ev: SmartDragDropEvent) {
        this.customer = ev.data;
        console.log(this.customer)
    }

    ngOnInit() {
        this.gridRegistry.getSmartGrid('CustomerGrid')
            .subscribe(grid => {
                this.gridDropTargetId = grid.rowDropTargetSelector;
            });
    }