Dashboard Item Group

• Oct 19, 2020
• 3 minutes to read

Like the Tab Container, the Dashboard Item Group (the GroupItem class) allows you to combine dashboard items within a dashboard. The dashboard item group serves two main purposes:

• To combine dashboard items within the dashboard into a separate layout group.
• Manage interaction between dashboard items within and outside the group.

For example, you can combine related filter elements and data visualization dashboard items into a group.

• Create a Group in UI
• Interactivity
• Create a Group in Code

Create a Group in UI

To create a new group, use the Group button (the icon) in the Toolbox.

You can combine dashboard items into a group in several ways.

• Create a new dashboard item using the buttons inside a group.
• Drag a new item from the Toolbox and drop it to the tab page.
• Move the existing items into a group using drag-and-drop.

Note

A dashboard item group cannot be added to another group.

Interactivity

The dashboard item group provides the capability to manage interaction between dashboard items within and outside the group.

The image below shows a group’s default interactivity settings:

The Master Filter button controls whether the current group allows you to filter dashboard items outside the group using master filter items contained within the group. By default, this option is disabled: master filter items in the group can filter only dashboard items from this group.

The Ignore Master Filters button allows you to isolate dashboard items contained within the group from external master filter items. By default, this option is enabled: external master filter items cannot filter the dashboard items contained within the group.

To access interactivity settings for the dashboard item group in code, use the GroupItem.interactivityOptions property. This property returns the DashboardItemGroupInteractivityOptions object that exposes the following members:

|

Property

|

Description

| | --- | --- | |

DashboardItemGroupInteractivityOptions.IsMasterFilter

|

Gets or sets whether external dashboard items can be filtered using master filter items contained in the current DashboardItemGroup / TabContainerDashboardItem.

| |

FilterableDashboardItemInteractivityOptions.IgnoreMasterFilters

|

Gets or sets whether the current dashboard item ignores filtering applied by master filters.

|

Create a Group in Code

Follow the steps below to create a tab container in code:

1. Create a GroupItem class instance.
2. Add the created group to the Dashboard.items collection.
3. Rebuild the current dashboard’s layout using the Dashboard.rebuildLayout property.

To add dashboard items to the group, assign the group’s componentName to the dashboard item’s parentContainer property.

The following code sample shows how to add an empty group:

var groupItem1 = new DevExpress.Dashboard.Model.GroupItem();

dashboardControl.dashboard().groups.push(groupItem1);

dashboardControl.dashboard().rebuildLayout();