How to: Customize a Layout of the Specified Group

• Aug 03, 2020
• 3 minutes to read

Important

This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.

Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:

• ASPxDashboardViewer -> ASPxDashboard

  How to migrate from ASPxDashboardViewer to ASPxDashboard working in the ViewerOnly mode

• MVCxDashboardViewer -> MVCxDashboard

  How to migrate from DashboardViewerExtension to DashboardExtension working in the ViewerOnly mode

The following example demonstrates how to change a layout of the specified group in code.

In this example, the ASPxDashboardViewer loads an existing dashboard with the predefined layout from an XML file. The bottom group contains three dashboard items that are placed horizontally side-by-side.

The following steps are performed to customize a group layout:

• Three layout items corresponding to existing dashboard items are obtained using the DashboardLayoutGroup.FindRecursive method. The DashboardLayoutNode.Weight property specifies the layout item size.
• Child items contained within the bottom group are removed using the NotifyingCollection`1.RemoveRange method.
• A new layout group is created to display the Combo Box and List Box filter elements. The orientation parameter specifies the orientation of layout items within this group.
• A newly created group and layout item displaying the Chart dashboard item are added to the DashboardLayoutGroup.ChildNodes collection.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-a-layout-of-the-specified-group-t206611.

WebForm1.aspx.vb

Imports System
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters
Imports DevExpress.DashboardCommon

Namespace Dashboard_UpdateGroupLayout
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        End Sub

        Protected Sub ASPxDashboardViewer1_DashboardLoaded(ByVal sender As Object, _
                                           ByVal e As DashboardLoadedWebEventArgs)
            Dim dashboard As Dashboard = e.Dashboard
            Dim root As DashboardLayoutGroup = dashboard.LayoutRoot
            Dim bottomLayoutGroup As DashboardLayoutGroup = root.FindRecursive(e.Dashboard.Groups(1))

            Dim comboBox As DashboardItem = CType(dashboard.Items("comboBoxDashboardItem1"),  _
                ComboBoxDashboardItem)
            Dim listBox As DashboardItem = CType(dashboard.Items("listBoxDashboardItem1"),  _
                ListBoxDashboardItem)
            Dim chart As DashboardItem = CType(dashboard.Items("chartDashboardItem2"),  _
                ChartDashboardItem)

            Dim comboBoxLayoutItem As DashboardLayoutItem = root.FindRecursive(comboBox)
            comboBoxLayoutItem.Weight = 10
            Dim listBoxLayoutItem As DashboardLayoutItem = root.FindRecursive(listBox)
            listBoxLayoutItem.Weight = 90
            Dim chartLayoutItem As DashboardLayoutItem = root.FindRecursive(chart)
            chartLayoutItem.Weight = 76

            bottomLayoutGroup.ChildNodes.RemoveRange(comboBoxLayoutItem, _
                                                     listBoxLayoutItem, _
                                                     chartLayoutItem)
            Dim childGroup1 As New DashboardLayoutGroup(DashboardLayoutGroupOrientation.Vertical, 24, _
                                                        comboBoxLayoutItem, listBoxLayoutItem)
            bottomLayoutGroup.ChildNodes.AddRange(childGroup1, chartLayoutItem)
        End Sub

        Protected Sub ASPxDashboardViewer1_ConfigureDataConnection(ByVal sender As Object, _
                                           ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.ConnectionName = "WebsiteStatisticsDataConnection" Then
                Dim parameters As XmlFileConnectionParameters = CType(e.ConnectionParameters,  _
                    XmlFileConnectionParameters)
                Dim databasePath As String = Server.MapPath("App_Data/WebsiteStatisticsData.xml")
                parameters.FileName = databasePath
            End If
        End Sub
    End Class
End Namespace

WebForm1.aspx.cs

using System;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;
using DevExpress.DashboardCommon;

namespace Dashboard_UpdateGroupLayout {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
        }

        protected void ASPxDashboardViewer1_DashboardLoaded(object sender, 
            DashboardLoadedWebEventArgs e) {
            Dashboard dashboard = e.Dashboard;
            DashboardLayoutGroup root = dashboard.LayoutRoot;
            DashboardLayoutGroup bottomLayoutGroup = root.FindRecursive(e.Dashboard.Groups[1]);

            DashboardItem comboBox = (ComboBoxDashboardItem)dashboard.Items["comboBoxDashboardItem1"];
            DashboardItem listBox = (ListBoxDashboardItem)dashboard.Items["listBoxDashboardItem1"];
            DashboardItem chart = (ChartDashboardItem)dashboard.Items["chartDashboardItem2"];

            DashboardLayoutItem comboBoxLayoutItem = root.FindRecursive(comboBox); 
            comboBoxLayoutItem.Weight = 10;
            DashboardLayoutItem listBoxLayoutItem = root.FindRecursive(listBox); 
            listBoxLayoutItem.Weight = 90;
            DashboardLayoutItem chartLayoutItem = root.FindRecursive(chart); 
            chartLayoutItem.Weight = 76;

            bottomLayoutGroup.ChildNodes.RemoveRange(comboBoxLayoutItem, 
                listBoxLayoutItem, chartLayoutItem);
            DashboardLayoutGroup childGroup1 = new DashboardLayoutGroup(
                DashboardLayoutGroupOrientation.Vertical, 24, 
                comboBoxLayoutItem, 
                listBoxLayoutItem);
            bottomLayoutGroup.ChildNodes.AddRange(childGroup1, chartLayoutItem);            
        }

        protected void ASPxDashboardViewer1_ConfigureDataConnection(object sender, 
            ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "WebsiteStatisticsDataConnection") {
                XmlFileConnectionParameters parameters =
                    (XmlFileConnectionParameters)e.ConnectionParameters;
                string databasePath = Server.MapPath("App_Data/WebsiteStatisticsData.xml");
                parameters.FileName = databasePath;
            }
        }
    }
}