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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 { "SalesRepGrid": { "componentType": "grid", "componentOptions": { "allowDrag": true, "gridLayout": { "height": 400, "pageSize": 10, "columns": [ { "field": "RepName" } ] }, "dataSource": "SalesRepDataSource", "objectName": "SalesRepGrid" } } }

Using HTML layouts

1 2 3 4 5 6 <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”

1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "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

1 2 3 4 5 6 7 8 9 <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

1 2 3 4 5 6 7 8 9 10 <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>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 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; }); }