How to: Insert an Existing Dashboard Item to a Newly Created 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 insert an existing dashboard item in a newly created group using Dashboard API.

In this example, the ASPxDashboardViewer loads an existing dashboard with the predefined layout from an XML file.

The following steps are performed to insert the tree view filter element into a newly created group:

• The layout item corresponding to the tree view is obtained using the DashboardLayoutGroup.FindRecursive method.
• The DashboardLayoutNode.InsertLeft method is used to insert the tree view layout item into the newly created layout group which is used to display a new dashboard item group.
• Finally, the layout item corresponding to the tree view is removed from the layout tree and added to the layout group’s DashboardLayoutGroup.ChildNodes collection.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-insert-an-existing-dashboard-item-to-a-newly-created-group-t206957.

WebForm1.aspx.vb

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

Namespace Dashboard_ChangeLayout
    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 group1 As DashboardItemGroup = e.Dashboard.CreateGroup()
            group1.Name = "Filters"
            group1.InteractivityOptions.IsMasterFilter = True
            Dim treeView1 As TreeViewDashboardItem =
                CType(e.Dashboard.Items("treeViewDashboardItem1"), TreeViewDashboardItem)
            treeView1.Group = group1

            Dim root As DashboardLayoutGroup = e.Dashboard.LayoutRoot
            Dim treeViewLayoutItem As DashboardLayoutItem = root.FindRecursive(treeView1)
            Dim groupItem As New DashboardLayoutGroup(group1)
            groupItem.Weight = treeViewLayoutItem.Weight
            treeViewLayoutItem.InsertLeft(groupItem)
            root.RemoveRecursive(treeViewLayoutItem)
            groupItem.ChildNodes.Add(treeViewLayoutItem)
        End Sub

        Protected Sub ASPxDashboardViewer1_ConfigureDataConnection(ByVal sender As Object, _
                                           ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.ConnectionName = "nwindConnection" Then
                Dim parameters As Access97ConnectionParameters = CType(e.ConnectionParameters,  _
                    Access97ConnectionParameters)
                Dim databasePath As String = Server.MapPath("App_Data/nwind.mdb")
                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_ChangeLayout {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
        }

        protected void ASPxDashboardViewer1_DashboardLoaded(object sender, 
            DashboardLoadedWebEventArgs e) {            
            DashboardItemGroup group1 = e.Dashboard.CreateGroup();
            group1.Name = "Filters"; group1.InteractivityOptions.IsMasterFilter = true;
            TreeViewDashboardItem treeView1 = 
                (TreeViewDashboardItem)e.Dashboard.Items["treeViewDashboardItem1"];
            treeView1.Group = group1;

            DashboardLayoutGroup root = e.Dashboard.LayoutRoot;
            DashboardLayoutItem treeViewLayoutItem = root.FindRecursive(treeView1);
            DashboardLayoutGroup groupItem = new DashboardLayoutGroup(group1);
            groupItem.Weight = treeViewLayoutItem.Weight;
            treeViewLayoutItem.InsertLeft(groupItem);
            root.RemoveRecursive(treeViewLayoutItem);
            groupItem.ChildNodes.Add(treeViewLayoutItem);
        }

        protected void ASPxDashboardViewer1_ConfigureDataConnection(object sender, 
            ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "nwindConnection") {
                Access97ConnectionParameters parameters =
                    (Access97ConnectionParameters)e.ConnectionParameters;
                string databasePath = Server.MapPath("App_Data/nwind.mdb");                   
                parameters.FileName = databasePath;
            }
        }
    }
}