How to: Customize Dashboard Layout in Code
- 4 minutes to read
This example constructs the layout of a sample dashboard that contains the following items:
- DateFilterDashboardItem
- ChartDashboardItem
- DashboardItemGroup that contains the DateFilter and Chart items
- GridDashboardItem
- RangeFilterDashboardItem
The Dashboard.LoadFromXml method loads a sample dashboard.
The following steps are taken to create a new layout:
- Create DashboardLayoutItem objects to display the existing dashboard items and DashboardLayoutGroup object to display a dashboard group. The weight parameter specifies the layout item’s relative size in a group.
- Create DashboardLayoutGroup objects to organize items which do not belong to a dashboard group item. Add layout items as child nodes to form a layout tree.
- Create a root group - a new DashboardLayoutGroup object whose DashboardLayoutGroup.DashboardItem property is null. Add the layout tree nodes to the root as its child nodes.
- Assign the root group to the Dashboard.LayoutRoot property.
Note
The complete sample project How to modify dashboard layout in code is available in the DevExpress Examples repository.
using System;
using System.Linq;
using DevExpress.XtraEditors;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWin;
//...
Dashboard dashboard = new Dashboard();
dashboard.LoadFromXml(@"Data\LayoutUnordered.xml");
dashboard.BeginUpdate();
// Switch off the DateFilter item's AutoHeight arrangement mode so that the DateFilter layout does not ignore its layout weight.
((DateFilterDashboardItem)(dashboard.Items["dateFilterDashboardItem1"])).ArrangementMode = DateFilterArrangementMode.Horizontal;
// Hide captions.
dashboard.Items.ForEach(item => item.ShowCaption = false);
dashboard.Groups.ForEach(item => item.ShowCaption = false);
// Create layout items for the DateFilter and Chart dashboard items.
DashboardLayoutItem dateFilterLayoutItem = new DashboardLayoutItem(dashboard.Items["dateFilterDashboardItem1"], 13);
DashboardLayoutItem chartLayoutItem = new DashboardLayoutItem(dashboard.Items["chartDashboardItem1"], 87);
// Create a layout item for the dashboard Group item.
DashboardLayoutGroup groupLayoutItem = new DashboardLayoutGroup()
{
Orientation = DashboardLayoutGroupOrientation.Vertical,
DashboardItem = dashboard.Groups["dashboardItemGroup1"],
Weight = 70
};
// Connect layout items in the layout tree.
groupLayoutItem.ChildNodes.AddRange(dateFilterLayoutItem, chartLayoutItem);
// Create a Grid layout item.
DashboardLayoutItem gridLayoutItem = new DashboardLayoutItem(dashboard.Items["gridDashboardItem1"], 30);
// Create a group layout item to organize the Grid layout item and a Dashboard Group layout item.
DashboardLayoutGroup layoutGroup = new DashboardLayoutGroup(DashboardLayoutGroupOrientation.Horizontal, 85);
// Connect layout items in the layout tree.
layoutGroup.ChildNodes.AddRange(gridLayoutItem, groupLayoutItem);
// Create a RangeFilter layout item.
DashboardLayoutItem rangeFilterLayoutItem = new DashboardLayoutItem(dashboard.Items["rangeFilterDashboardItem1"], 15);
// Create a root layout group. Its DashboardItem property is null.
DashboardLayoutGroup rootGroup = new DashboardLayoutGroup()
{
Orientation = DashboardLayoutGroupOrientation.Vertical,
Weight = 100,
DashboardItem = null
};
// Connect layout items in the layout tree.
rootGroup.ChildNodes.AddRange(layoutGroup, rangeFilterLayoutItem);
// The layout treee is built. Set the dashboard's root layout node to finalize the layout.
dashboard.LayoutRoot = rootGroup;
dashboard.EndUpdate();
dashboardViewer1.Dashboard = dashboard;
See Also