The DataGrid, TreeGrid and PropertyGrid objects support drag and drop behaviour. For configuring drag and drop behaviour users can make use of the dragDropBehaviour repository attribute. The options are “default”, “copy”, “move” and can be used as follows: ”default” - drag and drop is disabled in Grid ”copy” - record copy on drop in Grid ”move” - record move on drop in Grid Defaults are set based on each object type: DataGrid has dragDropBehaviour set to “default” by default. TreeGrid has dragDropBehaviour set to “copy” by default. PropertyGrid has dragDropBehaviour set to “default” by default.

• 1. Summary
• 2. Result
• 3. Step by Step Guide
• 3.1 Set your eventOnDrop event on a grid object
• 3.2 Implement a client logic function
• 4. Documentation

1. Summary

When a user wants to react to a drag and drop event, he can use the event eventOnDrop to define custom Client Logic.

2. Result

Open sample screen SampleDataGridDragAndDropDialog . You will find two grids with different dragDropBehaviour set. Each grid has an eventOnDrop event applied which displays a notification with the value of the source and target objects.

3. Step by Step Guide

3.1 Set your eventOnDrop event on a grid object

Set your eventOnDrop event on a grid object, for eg. #.onDrop(eventSource);

3.2 Implement a client logic function

Select in designer “Open events file” and add your new client logic function In our case SampleDataGridDragAndDrop.ts

export function onDrop(grid: akioma.swat.Grid) {
  akioma.swat.Message.message({
    text: `onDrop: ${grid.event.sourceObj.name} -> ${grid.event.targetObj.name}`,
    type: 'success'
  });
}

4. Documentation

To find more information, you can check the following documentation.

Grid / Table

Back to Use Cases

Back to Home Page