How to: Customize Dashboard Layout in Code

• Aug 02, 2018
• 3 minutes to read

The following example demonstrates how to modify dashboard layout in code.

In this example, the DashboardViewer loads a dashboard containing three dashboard items placed vertically, one above the other. The following steps are taken to create a new layout:

• Three DashboardLayoutItem objects are created to display the existing dashboard items. The weight parameter specifies the layout item’s relative size.
• A new DashboardLayoutGroup is created to display two dashboard items. The Orientation parameter specifies how layout items are placed within the group.
• A root layout group is created. This group contains the previously created group and another layout item.
• The root layout group is assigned to the LayoutRoot property.

This example also demonstrates how to swap layout items using the MoveRight(DashboardLayoutNode) method, save and restore the layout using the SaveDashboardLayout(String) and LoadDashboardLayout(String) methods.

Note

The complete sample project How to modify dashboard layout in code is available in the DevExpress Examples repository.

Form1.cs

using System;
using DevExpress.XtraEditors;
using DevExpress.DashboardCommon;

namespace Dashboard_LayoutCustomization {
    public partial class Form1 : XtraForm {
        public Form1() {
            InitializeComponent();
            dashboardViewer1.LoadDashboard(@"..\..\Data\Dashboard.xml");
        }

        private void btnUpdateLayout_Click(object sender, EventArgs e) {
            Dashboard dashboard = new Dashboard();
            dashboard.LoadFromXml(@"..\..\Data\Dashboard.xml");
            DashboardItem grid = (GridDashboardItem)dashboard.Items[0];
            DashboardItem chart = (ChartDashboardItem)dashboard.Items[1];
            DashboardItem range = (RangeFilterDashboardItem)dashboard.Items[2];

            // Creates layout items used to display dashboard items.
            DashboardLayoutItem gridItem = new DashboardLayoutItem(grid, 35);
            DashboardLayoutItem chartItem = new DashboardLayoutItem(chart, 65);
            DashboardLayoutItem rangeItem = new DashboardLayoutItem(range, 20);

            // Creates a layout group that contains two layout items.
            DashboardLayoutGroup group1 = 
                new DashboardLayoutGroup(DashboardLayoutGroupOrientation.Horizontal, 80, 
                    gridItem, chartItem);
            // Creates a root layout group that contains the previously created group and 
            // the layout item displaying the Range Filter dashboard item. 
            DashboardLayoutGroup rootGroup = 
                new DashboardLayoutGroup(DashboardLayoutGroupOrientation.Vertical, 1, 
                    group1, rangeItem);

            // Specifies the root dashboard layout group.
            dashboard.LayoutRoot = rootGroup;

            dashboardViewer1.Dashboard = dashboard;
        }
    }
}

Form1.vb

Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.XtraEditors
Imports DevExpress.DashboardCommon

Namespace Dashboard_LayoutCustomization
    Partial Public Class Form1
        Inherits XtraForm
        Public Sub New()
            InitializeComponent()
            dashboardViewer1.LoadDashboard("..\..\Data\Dashboard.xml")
        End Sub

        Private Sub btnUpdateLayout_Click(ByVal sender As Object, ByVal e As EventArgs) _
                Handles btnUpdateLayout.Click
            Dim dashboard As New Dashboard()
            dashboard.LoadFromXml("..\..\Data\Dashboard.xml")
            Dim grid As DashboardItem = CType(dashboard.Items(0), GridDashboardItem)
            Dim chart As DashboardItem = CType(dashboard.Items(1), ChartDashboardItem)
            Dim range As DashboardItem = CType(dashboard.Items(2), RangeFilterDashboardItem)

            ' Creates layout items used to display dashboard items.
            Dim gridItem As New DashboardLayoutItem(grid, 35)
            Dim chartItem As New DashboardLayoutItem(chart, 65)
            Dim rangeItem As New DashboardLayoutItem(range, 20)

            ' Creates a layout group that contains two layout items.
            Dim group1 As New DashboardLayoutGroup(DashboardLayoutGroupOrientation.Horizontal, _
                                                   80, gridItem, chartItem)
            ' Creates a root layout group that contains the previously created group and 
            ' the layout item displaying the Range Filter dashboard item. 
            Dim rootGroup As New DashboardLayoutGroup(DashboardLayoutGroupOrientation.Vertical, _
                                                    1, group1, rangeItem)

            ' Specifies the root dashboard layout group.
            dashboard.LayoutRoot = rootGroup

            dashboardViewer1.Dashboard = dashboard
        End Sub
    End Class
End Namespace