Working with Controls / DashboardLayout / Work with DashboardLayout / Drag and Drop
Drag and Drop

DashboardLayout supports drag drop operation of the tiles. On performing drag drop operation, the manner in which tiles reposition themselves differ for every layout. You can drag and drop a tile using two methods, using crosshair icon and tool-icon. The crosshair appears when you hover the mouse over the tile header. This tool lets you drag and drop a tile to another position on the DashboardLayout control. As an alternative, you can use the tool-icon to perform the drag drop operation by holding the cursor on the tool-icon.

Drag and Drop in Flow Layout

In flow layout, when a tile is dragged, all the remaining tiles reposition themselves in the flow direction set for the layout.

Showcasing dashoborad tile's drag-drop operation in flow layout

Drag and Drop in Auto Grid Layout

In auto grid layout, when you drag a tile, the dragged tile replaces its position with another tile in its cell.

Showcasing dashoborad tile's drag-drop operation in auto grid layout

Drag and Drop in Manual Grid Layout

In manual grid layout, when you drag a tile, the dragged tile replaces its position with another tile in the same row or column.

Showcasing dashoborad tile's drag-drop operation in manual grid layout

Drag and Drop in Split Layout

In split layout, when you drag a tile, it shifts to the other panel in the mouse navigation path and all the other tiles change their positions as well.

Showcasing dashoborad tile's drag-drop operation in split layout

By default, in the DashboardLayout control drag and drop operation is enabled. However, in case you want to disable drag and operations, you can make use of AllowDrag property provided by the DashboardLayout class.

Razor
Copy Code
//Disable the drag and drop operation for the tiles.
.AllowDrag(false)