The requested page is not available for the requested platform. You are viewing the content for Default platform.

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.

Layout_ItemsLayoutMain

Layout Concepts

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.

Item Resizing

You can resize individual items/groups by dragging their edges. The area that allows resizing items displays the resizing indicator (the Dashboard_ResizingIndicator icon).

Layout_ResizingItem

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.

ItemsResizing_Crosshair

This allows you to specify different widths for dashboard items in different 'rows'. The table below lists and describes different modes.

Indicator Result Description
VertIndicator_Layout Crosshair_VerticalResizing Orients the layout group horizontally and allows you to change individual items' height and the width of 'columns'.
HorzIndicator_Layout Crosshair_HorizontalResizing 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:

DashboardDesigner.MaximizeDashboardItem

Expands the specified dashboard item to the entire dashboard size to examine data in greater detail.

DashboardDesigner.RestoreDashboardItem

Restores the item size if an item is expanded to the entire dashboard size (maximized).'

Note

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.

Item Positioning

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 Layout_DragAndDropIcon 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:

Action

Description

DashboardDesigner_DraggingItem_1

Select the required dashboard item.

DashboardDesigner_DraggingItem_2

Drag the dashboard item to the expected area. The drag indicator...

DashboardDesigner_DragIndicator

...shows the dashboard item's possible positions.

DashboardDesigner_DraggingItem_3

Move the mouse pointer to the required position. The drop indicator...

DashboardDesigner_DropIndicator

…highlights the hovered position.

DashboardDesigner_DraggingItem_4

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.

DashboardDesigner_DraggingItem_5

The dashboard item is moved to a new position.

Note

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:

Method Description
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.
Note

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:

Method Description
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.
See Also