Dashboard Items Layout
- 4 min to read
The Dashboard Designer provides the capability to arrange and resize dashboard items and groups using simple drag-and-drop operations. You can also arrange and resize dashboard items using an API the Dashboard provides.
The dashboard arranges dashboard items, groups and tabs using layout items, layout groups and layout tab pages arranged in layout tab container. They are special containers that are used to display a dashboard layout as a hierarchical structure.
Refer to Dashboard Layout for more information about concepts related to a dashboard layout.
You can resize individual items/groups by dragging their edges. The area that allows resizing items displays the resizing indicator (the icon).
A 2x2 dashboard items layout group is horizontally oriented and contains two child layout groups by default. This arranges dashboard items in two 'columns' and allows you to set a different height for items in different columns. You can switch the group's orientation to DashboardLayoutGroupOrientation.Vertical using the indicator at the group's intersection.
This allows you to specify different widths for dashboard items in different 'rows'. The table below lists and describes different modes.
|Orients the layout group horizontally and allows you to change individual items' height and the width of 'columns'.|
|Orients the layout group vertically and allows you to change the width of individual items and the height of 'rows'.|
To set the size of the layout item/group in code, use the DashboardLayoutNode.Weight property. It specifies the size of the layout item/group relative to the total weight of the parent's layout items/groups.
Maximize and Restore Item
You can expand any dashboard item into the whole dashboard size to examine data in greater detail. The expanded dashboard item size in this case is the same as the root layout group.
To maximize a dashboard item, click the Maximize button in the dashboard item caption.
To restore the item size, click Restore.
In code, call the following methods:
Expands the specified dashboard item to the entire dashboard size to examine data in greater detail.
Restores the item size if an item is expanded to the entire dashboard size (maximized).'
The dashboard item is re-created when you maximize / restore the item. All events connected with a dashboard item life cycle (such as DashboardItemControlCreated, DashboardItemControlUpdated, etc.) are fired again.
You can change the position of a dashboard item using drag-and-drop and one of the following approaches:
- If the dashboard item's caption is visible, click it and hold down the left mouse button while dragging the item.
- If the dashboard item's caption is not visible, click the icon in the top left corner, and hold down the left mouse button while dragging the item.
Depending on the required position, a new layout group is created (if required) to maintain the item's arrangement. Thus, the dashboard item can be inserted into a new or existing dashboard layout group.
The following table illustrates how a dashboard item is dragged:
Select the required dashboard item.
Drag the dashboard item to the expected area. The drag indicator...
...shows the dashboard item's possible positions.
Move the mouse pointer to the required position. The drop indicator...
…highlights the hovered position.
Then, the drop indicator sequentially displays areas that the dashboard item can occupy. Release the left mouse button when the drop indicator displays the required area.
The dashboard item is moved to a new position.
You can specify various settings related to changing the dashboard's layout in the Dashboard Designer. See Dashboard Surface for more details.
You can use the following methods to change the position of layout items/groups in code:
|DashboardLayoutNode.MoveAbove||Moves the current layout item/group above the specified layout item/group.|
|DashboardLayoutNode.MoveBelow||Moves the current layout item/group below the specified layout item/group.|
|DashboardLayoutNode.MoveLeft||Moves the current layout item/group to the left of the specified layout item/group.|
|DashboardLayoutNode.MoveRight||Moves the current layout item/group to the right of the specified layout item/group.|
You cannot move the layout group to a position within its own subtree.
The following methods allow you to insert the layout item/group next to the current layout item/group and display them side by side:
|DashboardLayoutNode.InsertAbove||Inserts the layout item displaying the specified dashboard item above the current layout item/group.|
|DashboardLayoutNode.InsertBelow||Inserts the layout item displaying the specified dashboard item below the current layout item/group.|
|DashboardLayoutNode.InsertLeft||Inserts the layout item displaying the specified dashboard item to the left of the current layout item/group.|
|DashboardLayoutNode.InsertRight||Inserts the layout item displaying the specified dashboard item to the right of the current layout item/group.|