Skip to main content

Dashboard Layout in the Web Dashboard

  • 4 minutes to read

This topic describes the features related to the dashboard layout in the Web Dashboard.

Item Layout Concepts

The dashboard arranges dashboard items and groups using layout items and layout groups. They are containers that display a dashboard layout as a hierarchical structure.

Refer to the following article for more information about concepts related to a dashboard layout: Dashboard Layout.

Item Resizing

Click and drag a separator line between items to resize them.

Web Dashboard Item Resizing

Maximize and Restore Item

You can expand any dashboard item to fit the dashboard to examine data in greater detail. The expanded dashboard item size in this case is the same as the root layout group.

Click the Maximize button in the dashboard item caption to maximize a dashboard item.

Web Dashboard - Maximize Item Button

Click Restore to restore the item’s size.

Web Dashboard - Restore Item Button

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 dashboard item life cycle (such as ItemWidgetCreated, ItemWidgetUpdated, etc.) are fired again.

Item Positioning

Use the dashboard item’s Move button to change the dashboard item’s position.

The dashboard arranges dashboard items and groups using layout items and layout groups. They are containers that display a dashboard layout as a hierarchical structure. The dashboard item can be inserted into a new or existing dashboard layout group.

Click a dashboard item to select it and hover over the Move button. The mouse pointer is changed to Move cursor-move.

Web Dashboard - Move an Item

Drag the dashboard item to the expected area and release the left mouse button when the drop indicator displays the required area.

Web Dashboard - Item Drop Indicator

The dashboard item is moved to a new position.

Web Dashboard - Item Move Result

Dashboard Width and Height

The control automatically stretches or shrinks content (dashboard items) in a dashboard to fit available screen space horizontally and vertically. You can adjust layout options and specify exact content width and height:

Run Demo: Sales Performance

Web Dashboard Scrollable Layout

The layoutOptions property allows you to access the LayoutOptions object. You can use the LayoutOptions.height and LayoutOptions.width properties to adjust the dashboard layout. These properties return the LayoutDimensionOptions object that contains settings for the corresponding dimensions of the dashboard surface.

The LayoutDimensionOptions.mode property allows you to specify whether the height or width of a dashboard surface is fixed or adjusted to fit its content:

The height or width of a dashboard surface fits to content.
The height or width of a dashboard surface is set in pixels according to the value property.

You can also mix layout modes for each dimension: for example, set the Auto value for width and Fixed for height to scroll a dashboard layout vertically.

Layout Size Best Practices

You may have two scroll bars in your application: on the HTML page and inside the dashboard control. We recommend that you design the application layout to avoid HTML page scrolling because it can lead to UI issues when the control operates in Designer mode:

  • The size of pop-up elements like message boxes and item menus are based on the height and width of the dashboard control. Those elements can be hidden if the control does not fit the page’s visible area.
  • When the dashboard’s size is larger than the control’s size, the control scrolls the dashboard surface so you can place dashboard items in any position. Auto scrolling (in drag-and-drop operations) can only be used to scroll a dashboard and does not affect page scrolling.

Web Dashboard - Two Scrollbars Issue Explanation

Instead, keep dashboard controls in the visible area of the HTML page:

Web Dashboard - How to Avoid Two Scrollbar Issue

In Viewer mode, you can programmatically adjust the size of the control to fit a dashboard:

Web Dashboard - Auto Size in the Viewer Mode

This example shows how to set the control in Viewer mode to the same size as the dashboard. This method allows you to avoid two scroll bars on the page. You can also open the control in Designer mode to resize the dashboard. In this mode, the control occupies the HTML page’s visible area.

View Example