dashboard-devexpress-dot-dashboardcommon-dot-dashboard-cde2877f.md
Gets or sets the root dashboard layout group.
Namespace : DevExpress.DashboardCommon
Assembly : DevExpress.Dashboard.v25.2.Core.dll
NuGet Package : DevExpress.Dashboard.Core
[Browsable(false)]
[DefaultValue(null)]
public DashboardLayoutGroup LayoutRoot { get; set; }
<Browsable(False)>
<DefaultValue(Nothing)>
Public Property LayoutRoot As DashboardLayoutGroup
| Type | Default | Description |
|---|---|---|
| DashboardLayoutGroup | null |
A DashboardLayoutGroup object that specifies the root dashboard layout group.
|
A LayoutRoot layout group contains child layout items and groups used to arrange dashboard items. You can use the DashboardLayoutGroup.ChildNodes property to access the collection of child items and groups.
This example constructs the layout of a sample dashboard that contains the following items:
The Dashboard.LoadFromXml method loads a sample dashboard.
The following steps are taken to create a new layout:
Dashboard.LayoutRoot property.View Example: How to modify dashboard layout in code
using System;
using System.Linq;
using DevExpress.XtraEditors;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWin;
using System.IO;
namespace Dashboard_LayoutCustomization
{
public partial class Form1 : XtraForm
{
public Form1()
{
InitializeComponent();
dashboardViewer1.CustomizeDashboardTitle += DashboardViewer1_CustomizeDashboardTitle;
dashboardViewer1.LoadDashboard(@"Data\LayoutUnordered.xml");
}
private void ChangeLayout(DashboardToolbarItemClickEventArgs args)
{
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;
}
private void RepositionItems(DashboardToolbarItemClickEventArgs args)
{
Dashboard dashboard = dashboardViewer1.Dashboard;
DashboardLayoutGroup rootGroup = dashboard.LayoutRoot.ChildNodes[0] as DashboardLayoutGroup;
if ((rootGroup != null) && (rootGroup.ChildNodes.Count > 1))
rootGroup.ChildNodes[0].MoveRight(rootGroup.ChildNodes[1]);
}
private void SaveLayoutToFile(DashboardToolbarItemClickEventArgs args)
{
dashboardViewer1.SaveDashboardLayout("DashboardLayout.xml");
}
private void LoadLayoutFromFile(DashboardToolbarItemClickEventArgs obj)
{
if (File.Exists("DashboardLayout.xml"))
dashboardViewer1.LoadDashboardLayout("DashboardLayout.xml");
}
private void DashboardViewer1_CustomizeDashboardTitle(object sender, CustomizeDashboardTitleEventArgs e)
{
var exportItem = e.Items.FirstOrDefault(i => i.ButtonType == DashboardButtonType.Export);
if (exportItem != null)
e.Items.Remove(exportItem);
DashboardToolbarItem btnChangeLayout = new DashboardToolbarItem();
btnChangeLayout.Caption = "Change Layout";
btnChangeLayout.ClickAction = new Action<DashboardToolbarItemClickEventArgs>(ChangeLayout);
e.Items.Add(btnChangeLayout);
DashboardToolbarItem btnRepositionItems = new DashboardToolbarItem();
btnRepositionItems.Caption = "Reposition Items";
btnRepositionItems.ClickAction = new Action<DashboardToolbarItemClickEventArgs>(RepositionItems);
e.Items.Add(btnRepositionItems);
DashboardToolbarItem btnSaveLayout = new DashboardToolbarItem();
btnSaveLayout.Caption = "Save Layout to File";
btnSaveLayout.ClickAction = new Action<DashboardToolbarItemClickEventArgs>(SaveLayoutToFile);
e.Items.Add(btnSaveLayout);
DashboardToolbarItem btnLoadLayout = new DashboardToolbarItem();
btnLoadLayout.Caption = "Load Layout from File";
btnLoadLayout.ClickAction = new Action<DashboardToolbarItemClickEventArgs>(LoadLayoutFromFile);
e.Items.Add(btnLoadLayout);
}
}
}
Imports System
Imports System.Linq
Imports DevExpress.XtraEditors
Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWin
Imports System.IO
Namespace Dashboard_LayoutCustomization
Partial Public Class Form1
Inherits XtraForm
Public Sub New()
InitializeComponent()
AddHandler dashboardViewer1.CustomizeDashboardTitle, AddressOf DashboardViewer1_CustomizeDashboardTitle
dashboardViewer1.LoadDashboard("Data\LayoutUnordered.xml")
End Sub
Private Sub ChangeLayout(ByVal args As DashboardToolbarItemClickEventArgs)
Dim dashboard As 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.
CType(dashboard.Items("dateFilterDashboardItem1"), DateFilterDashboardItem).ArrangementMode = DateFilterArrangementMode.Horizontal
' Hide captions.
dashboard.Items.ForEach(Sub(item) item.ShowCaption = False)
dashboard.Groups.ForEach(Sub(item) item.ShowCaption = False)
' Create layout items for the DateFilter and Chart dashboard items.
Dim dateFilterLayoutItem As New DashboardLayoutItem(dashboard.Items("dateFilterDashboardItem1"), 13)
Dim chartLayoutItem As New DashboardLayoutItem(dashboard.Items("chartDashboardItem1"), 87)
' Create a layout item for the dashboard Group item.
Dim groupLayoutItem As New DashboardLayoutGroup() With {.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.
Dim gridLayoutItem As New DashboardLayoutItem(dashboard.Items("gridDashboardItem1"), 30)
' Create a group layout item to organize the Grid layout item and a Dashboard Group layout item.
Dim layoutGroup As New DashboardLayoutGroup(DashboardLayoutGroupOrientation.Horizontal, 85)
' Connect layout items in the layout tree.
layoutGroup.ChildNodes.AddRange(gridLayoutItem, groupLayoutItem)
' Create a RangeFilter layout item.
Dim rangeFilterLayoutItem As New DashboardLayoutItem(dashboard.Items("rangeFilterDashboardItem1"), 15)
' Create a root layout group. Its DashboardItem property is null.
Dim rootGroup As New DashboardLayoutGroup() With {.Orientation = DashboardLayoutGroupOrientation.Vertical, .Weight = 100, .DashboardItem = Nothing}
' 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
End Sub
Private Sub RepositionItems(ByVal args As DashboardToolbarItemClickEventArgs)
Dim dashboard As Dashboard = dashboardViewer1.Dashboard
Dim rootGroup As DashboardLayoutGroup = TryCast(dashboard.LayoutRoot.ChildNodes(0), DashboardLayoutGroup)
If (rootGroup IsNot Nothing) AndAlso (rootGroup.ChildNodes.Count > 1) Then
rootGroup.ChildNodes(0).MoveRight(rootGroup.ChildNodes(1))
End If
End Sub
Private Sub SaveLayoutToFile(ByVal args As DashboardToolbarItemClickEventArgs)
dashboardViewer1.SaveDashboardLayout("DashboardLayout.xml")
End Sub
Private Sub LoadLayoutFromFile(ByVal obj As DashboardToolbarItemClickEventArgs)
If File.Exists("DashboardLayout.xml") Then
dashboardViewer1.LoadDashboardLayout("DashboardLayout.xml")
End If
End Sub
Private Sub DashboardViewer1_CustomizeDashboardTitle(ByVal sender As Object, ByVal e As CustomizeDashboardTitleEventArgs)
Dim exportItem = e.Items.FirstOrDefault(Function(i) i.ButtonType = DashboardButtonType.Export)
If exportItem IsNot Nothing Then
e.Items.Remove(exportItem)
End If
Dim btnChangeLayout As New DashboardToolbarItem()
btnChangeLayout.Caption = "Change Layout"
btnChangeLayout.ClickAction = New Action(Of DashboardToolbarItemClickEventArgs)(AddressOf ChangeLayout)
e.Items.Add(btnChangeLayout)
Dim btnRepositionItems As New DashboardToolbarItem()
btnRepositionItems.Caption = "Reposition Items"
btnRepositionItems.ClickAction = New Action(Of DashboardToolbarItemClickEventArgs)(AddressOf RepositionItems)
e.Items.Add(btnRepositionItems)
Dim btnSaveLayout As New DashboardToolbarItem()
btnSaveLayout.Caption = "Save Layout to File"
btnSaveLayout.ClickAction = New Action(Of DashboardToolbarItemClickEventArgs)(AddressOf SaveLayoutToFile)
e.Items.Add(btnSaveLayout)
Dim btnLoadLayout As New DashboardToolbarItem()
btnLoadLayout.Caption = "Load Layout from File"
btnLoadLayout.ClickAction = New Action(Of DashboardToolbarItemClickEventArgs)(AddressOf LoadLayoutFromFile)
e.Items.Add(btnLoadLayout)
End Sub
End Class
End Namespace
The following code snippets (auto-collected from DevExpress Examples) contain references to the LayoutRoot property.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.
winforms-dashboard-designer-merge-dashboards-to-tabs/CS/DashboardMerger/DashboardMerger.cs#L50
// Specify the target dashboard's layout tab page as the parent container instead of the former layout root group.
LayoutMerger.MergeLayout(dashboard.LayoutRoot, dashboard.Title.Text, this);
return true;
winforms-dashboard-window-calculation-example/CS/WindowCalculationExample/TabPageLoadHelper.cs#L63
DashboardLayoutGroup layoutRoot = originalDashboard.LayoutRoot;
layoutPage.ChildNodes.Add(layoutRoot);
winforms-dashboard-create-layout-from-scratch/CS/Dashboard_LayoutCustomization/Form1.cs#L59
// The layout treee is built. Set the dashboard's root layout node to finalize the layout.
dashboard.LayoutRoot = rootGroup;
dashboard.EndUpdate();
wpf-dashboard-olap-data-provider/CS/WpfDashboard_OlapDataProvider/MainWindow.xaml.cs#L61
50D, cardLayoutItem, chartLayoutItem);
dBoard.LayoutRoot = rootGroup;
winforms-dashboard-designer-merge-dashboards-to-tabs/VB/DashboardMerger/DashboardMerger.vb#L82
' Specify the target dashboard's layout tab page as the parent container instead of the former layout root group.
LayoutMerger.MergeLayout(dashboard.LayoutRoot, dashboard.Title.Text, Me)
Return True
winforms-dashboard-window-calculation-example/VB/WindowCalculationExample/TabPageLoadHelper.vb#L82
Dim layoutRoot As DashboardLayoutGroup = originalDashboard.LayoutRoot
layoutPage.ChildNodes.Add(layoutRoot)
winforms-dashboard-create-layout-from-scratch/VB/Dashboard_LayoutCustomization/Form1.vb#L47
' The layout treee is built. Set the dashboard's root layout node to finalize the layout.
dashboard.LayoutRoot = rootGroup
dashboard.EndUpdate()
wpf-dashboard-olap-data-provider/VB/WpfDashboard_OlapDataProvider/MainWindow.xaml.vb#L53
Dim rootGroup As DashboardLayoutGroup = New DashboardLayoutGroup(DashboardLayoutGroupOrientation.Vertical, 50R, cardLayoutItem, chartLayoutItem)
dBoard.LayoutRoot = rootGroup
Return dBoard
See Also