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 |
|---|---|
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"
}
}
}