Back to Devexpress

Title and Item Captions

dashboard-401132-winforms-dashboard-winforms-viewer-title-and-item-captions.md

latest23.5 KB
Original Source

Title and Item Captions

  • Oct 28, 2021
  • 8 minutes to read

The Dashboard Title and Dashboard Item Caption are areas located on the dashboard surface and may contain relevant up-to-date information regarding the displayed data and command buttons, which allow end-users to easily perform common activities. Title and captions are already packed with useful indicators and buttons, but you can also deliberately hide built-in items or add your own.

Customization

You can modify the dashboard title and dashboard item captions at runtime: change displayed text, remove existing buttons and add custom buttons or command bar items, including drop-down menus.

In the dashboard title, handle the CustomizeDashboardTitle event and customize the following elements:

ElementAPI
Dashboard Title Texte.Text
Master Filter State Texte.FilterText
Command Buttonse.Items

In the dashboard item caption, handle the CustomizeDashboardItemCaption event and customize the following elements:

ElementAPI
Dashboard Item Namese.Text
Interactivity Informatione.FilterText
Command Buttonse.Items

These events occur when the dashboard title or dashboard item caption are changed. It happens in the following situations:

Tip

Call the DashboardViewer.UpdateDashboardTitle or DashboardViewer.UpdateDashboardItemCaption methods to fire events manually.

Example: Add a Command Button to the Dashboard Title and Item Caption

This code snippets below show how to handle the CustomizeDashboardTitle and CustomizeDashboardItemCaption events to add command buttons with custom actions.

csharp
using DevExpress.DashboardCommon;
using DevExpress.DashboardWin;

namespace CommandButtonForTitleAndCaption {
    public partial class Form1 : DevExpress.XtraEditors.XtraForm {
        public Form1() {
            InitializeComponent();
            dashboardViewer1.ConfigureDataConnection += DashboardViewer1_ConfigureDataConnection;
            dashboardViewer1.CustomizeDashboardTitle += DashboardViewer1_CustomizeDashboardTitle;
            dashboardViewer1.CustomizeDashboardItemCaption += DashboardViewer1_CustomizeDashboardItemCaption;
            dashboardViewer1.LoadDashboard("DashboardTest.xml");
        }

        private void DashboardViewer1_CustomizeDashboardTitle(object sender, CustomizeDashboardTitleEventArgs e) {
            DashboardToolbarItem item = new DashboardToolbarItem((args) => {
                    System.Diagnostics.Process.Start("https://docs.devexpress.com/Dashboard/");
                })
            {
                SvgImage = svgImageCollection1["needassistance"],
                Caption = "Online Help",
                Tooltip = "Navigate to the online Dashboard help"
            };
            e.Items.Add(item);
        }
        private void DashboardViewer1_CustomizeDashboardItemCaption(object sender, CustomizeDashboardItemCaptionEventArgs e)
        {
            DashboardViewer viewer = sender as DashboardViewer;
            GridDashboardItem gridItem = viewer.Dashboard.Items[e.DashboardItemName] as GridDashboardItem;
            if (gridItem != null) {
                DashboardToolbarItem cmdButtonItem = new DashboardToolbarItem {
                    ClickAction = args => SwitchGridMeasureColumnDisplayMode(gridItem),
                    SvgImage = svgImageCollection1["bluedatabarsolid"],
                    Tooltip = "Switch between bars and numbers"
                };
                e.Items.Insert(0, cmdButtonItem);
            };

        }
        private void SwitchGridMeasureColumnDisplayMode(GridDashboardItem gridItem) {
            foreach (var column in gridItem.Columns) {
                GridMeasureColumn measureColumn = column as GridMeasureColumn;
                if (measureColumn != null) {
                    switch (measureColumn.DisplayMode) {
                        case GridMeasureColumnDisplayMode.Bar:
                            measureColumn.DisplayMode = GridMeasureColumnDisplayMode.Value;
                            break;
                        case GridMeasureColumnDisplayMode.Value:
                            measureColumn.DisplayMode = GridMeasureColumnDisplayMode.Bar;
                            break;
                    }
                }
            }
        }
        private void DashboardViewer1_ConfigureDataConnection(object sender, DashboardConfigureDataConnectionEventArgs e) {
            if (e.ConnectionParameters is ExcelDataSourceConnectionParameters connParams)
                connParams.FileName = "SalesPerson.xlsx";
        }
    }
}
vb
Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWin

Namespace CommandButtonForTitleAndCaption
    Partial Public Class Form1
        Inherits DevExpress.XtraEditors.XtraForm

        Public Sub New()
            InitializeComponent()
            AddHandler dashboardViewer1.ConfigureDataConnection, AddressOf DashboardViewer1_ConfigureDataConnection
            AddHandler dashboardViewer1.CustomizeDashboardTitle, AddressOf DashboardViewer1_CustomizeDashboardTitle
            AddHandler dashboardViewer1.CustomizeDashboardItemCaption, AddressOf DashboardViewer1_CustomizeDashboardItemCaption
            dashboardViewer1.LoadDashboard("DashboardTest.xml")
        End Sub

        Private Sub DashboardViewer1_CustomizeDashboardTitle(ByVal sender As Object, ByVal e As CustomizeDashboardTitleEventArgs)
            Dim item As DashboardToolbarItem = New DashboardToolbarItem(Sub(args)
                System.Diagnostics.Process.Start("https://docs.devexpress.com/Dashboard/")
            End Sub) With {.SvgImage = svgImageCollection1("needassistance"), .Caption = "Online Help", .Tooltip = "Navigate to the online Dashboard help"}
            e.Items.Add(item)
        End Sub
        Private Sub DashboardViewer1_CustomizeDashboardItemCaption(ByVal sender As Object, ByVal e As CustomizeDashboardItemCaptionEventArgs)
            Dim viewer As DashboardViewer = TryCast(sender, DashboardViewer)
            Dim gridItem As GridDashboardItem = TryCast(viewer.Dashboard.Items(e.DashboardItemName), GridDashboardItem)
            If gridItem IsNot Nothing Then
                Dim cmdButtonItem As DashboardToolbarItem = New DashboardToolbarItem With {.ClickAction = Sub(args) SwitchGridMeasureColumnDisplayMode(gridItem), .SvgImage = svgImageCollection1("bluedatabarsolid"), .Tooltip = "Switch between bars and numbers"}
                e.Items.Insert(0, cmdButtonItem)
            End If

        End Sub

        Private Sub SwitchGridMeasureColumnDisplayMode(ByVal gridItem As GridDashboardItem)
            For Each column In gridItem.Columns
                Dim measureColumn As GridMeasureColumn = TryCast(column, GridMeasureColumn)
                If measureColumn IsNot Nothing Then
                    Select Case measureColumn.DisplayMode
                        Case GridMeasureColumnDisplayMode.Bar
                            measureColumn.DisplayMode = GridMeasureColumnDisplayMode.Value
                        Case GridMeasureColumnDisplayMode.Value
                            measureColumn.DisplayMode = GridMeasureColumnDisplayMode.Bar
                    End Select
                End If
            Next column
        End Sub
        Private Sub DashboardViewer1_ConfigureDataConnection(ByVal sender As Object, ByVal e As DashboardConfigureDataConnectionEventArgs)
            Dim connParams As ExcelDataSourceConnectionParameters = TryCast(e.ConnectionParameters, ExcelDataSourceConnectionParameters)
            If connParams IsNot Nothing Then
                connParams.FileName = "SalesPerson.xlsx"
            End If
        End Sub
    End Class
End Namespace

Example: Customize the Dashboard Title and Dashboard Item Captions

This example demonstrates how to handle the IDashboardControl.CustomizeDashboardItemCaption and IDashboardControl.CustomizeDashboardTitle events to modify dashboard title and dashboard item captions.

The dashboard title displays the dimensions and values by which the dashboard data is filtered. You can use a drop-down menu to selectively hide dashboard item captions. Clicking a custom Support button navigates to this example online.

A dashboard item caption displays the item’s master filter values.

Export buttons are hidden for all dashboard items except the map, and for the entire dashboard, if the displayed data’s Category field contains “Bikes”.

View Example: WinForms Dashboard - How to customize the dashboard title and dashboard item captions

cs
using DevExpress.DashboardCommon;
using DevExpress.DashboardCommon.ViewerData;
using DevExpress.DashboardWin;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;

namespace CustomizeDashboardItemCaption_Viewer_Example {
    public partial class ViewerForm1 : DevExpress.XtraEditors.XtraForm {
        private static bool allowExport = false; 
        public ViewerForm1() {
            InitializeComponent();
            dashboardViewer.AllowPrintDashboardItems = true;

            dashboardViewer.CustomizeDashboardTitle += DashboardViewer_CustomizeDashboardTitle;
            dashboardViewer.CustomizeDashboardItemCaption += DashboardViewer_CustomizeDashboardItemCaption;

            dashboardViewer.PopupMenuShowing += DashboardViewer_PopupMenuShowing;
            dashboardViewer.MasterFilterSet += DashboardViewer_MasterFilterSet;

            dashboardViewer.UpdateDashboardTitle();
            UpdateDashboardItemCaptions();
        }

        private void DashboardViewer_CustomizeDashboardTitle(object sender, CustomizeDashboardTitleEventArgs e) {
            DashboardViewer viewer = (DashboardViewer)sender;

            // Display a string of master filter values.
            string filterText = string.Empty;
            foreach (var item in viewer.Dashboard.Items) {
                if (viewer.CanSetMasterFilter(item.ComponentName)) {
                    var filterValues = viewer.GetCurrentFilterValues(item.ComponentName);
                    filterText += GetFilterText(filterValues);
                }
            }
            DashboardToolbarItem toolbarItem = new DashboardToolbarItem();
            toolbarItem.Caption = "Filter: " + filterText;
            e.Items.Insert(0, toolbarItem);

            // Remove the Export button depending on the static variable.
            if (!allowExport) {
                RemoveExportButton(e.Items);
            }

            // Add drop-down menu to show/hide dashboard item captions.
            DashboardToolbarItem toolbarItemRoot = new DashboardToolbarItem();
            toolbarItemRoot.Caption = @"Show/Hide Dashboard Item Captions";
            toolbarItemRoot.SvgImage = svgImageCollection1["title"];
            foreach (var item in viewer.Dashboard.Items) {
                DashboardToolbarMenuItem menuItem = new DashboardToolbarMenuItem(item.ShowCaption, item.Name, 
                    new Action<DashboardToolbarItemClickEventArgs>((args) => {
                        item.ShowCaption = !item.ShowCaption;
                    }));
                menuItem.ImageOptions.SvgImage = svgImageCollection1["title"];
                toolbarItemRoot.MenuItems.Add(menuItem);
            }
            e.Items.Insert(0, toolbarItemRoot);

            // Add a button with an image to navigate to Online Help.
            DashboardToolbarItem infoLinkItem = new DashboardToolbarItem("",
                new Action<DashboardToolbarItemClickEventArgs>((args) => {
                    System.Diagnostics.Process.Start("https://docs.devexpress.com/Dashboard/");
                }));
            // Note that a raster image is proportionally resized to 24 px height when displayed in the Title area.
            infoLinkItem.SvgImage = svgImageCollection1["support"];
            e.Items.Add(infoLinkItem);
        }

        private void DashboardViewer_CustomizeDashboardItemCaption(object sender, CustomizeDashboardItemCaptionEventArgs e) {
            // Remove the Export button depending on the static variable.
            if (!allowExport) {
                if (!e.DashboardItemName.Contains("Map")) {
                    RemoveExportButton(e.Items);
                }
            }

            // Display filter values.
            DashboardViewer viewer = (DashboardViewer)sender;
            var filterValues = viewer.GetCurrentFilterValues(e.DashboardItemName);
            if (filterValues != null)
                if (filterValues.Count > 0)
                    e.FilterText = string.Format(" ( Filter: {0})", string.Concat(filterValues.Select(
                        axp => string.Format("{0} ", axp.GetAxisPoint(axp.AvailableAxisNames[0]).DisplayText)).ToArray()));

        }

        private void DashboardViewer_PopupMenuShowing(object sender, DashboardPopupMenuShowingEventArgs e) {
            // Hide popup menu everywhere except the dashboard title, to hide commands related to the export actions. 
            if (e.DashboardArea == DashboardArea.DashboardItem)
                e.Allow = false;
        }       
        private void DashboardViewer_MasterFilterSet(object sender, MasterFilterSetEventArgs e) {
            if (e.DashboardItemName == "listBoxDashboardItem1")
                allowExport = e.SelectedValues.Select(value => value[0].ToString()).Contains("Bikes") ? false : true;
            UpdateDashboardItemCaptions();
            dashboardViewer.UpdateDashboardTitle();
        }
        private string GetFilterText(IList<AxisPointTuple> filterValues) {
            string filterText = string.Empty;
            if (filterValues.Count > 0) {
                string dimensionName = string.Concat(filterValues.Select(
                    axp => string.Format("{0} ", axp.GetAxisPoint(axp.AvailableAxisNames[0]).Dimension.Name)).Distinct());
                filterText = string.Format(" ({0}:{1})", dimensionName, string.Join(",", filterValues.Select(
                    axp => string.Format(" {0}", axp.GetAxisPoint(axp.AvailableAxisNames[0]).DisplayText)).ToArray()));
            }
            return filterText;
        }
        private void UpdateDashboardItemCaptions() {
            foreach (DashboardItem i in dashboardViewer.Dashboard.Items) {
                dashboardViewer.UpdateDashboardItemCaption(i.ComponentName);
            }
        }
        private void RemoveExportButton(IList<DashboardToolbarItem> items) {
            var exportItem = items.FirstOrDefault(i => i.ButtonType == DashboardButtonType.Export);
            if (exportItem != null) {
                items.Remove(exportItem);
            }
        }
    }
}
vb
Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardCommon.ViewerData
Imports DevExpress.DashboardWin
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq

Namespace CustomizeDashboardItemCaption_Viewer_Example
    Partial Public Class ViewerForm1
        Inherits DevExpress.XtraEditors.XtraForm

        Private Shared allowExport As Boolean = False

        Public Sub New()
            InitializeComponent()
            dashboardViewer.AllowPrintDashboardItems = True

            AddHandler dashboardViewer.CustomizeDashboardTitle, AddressOf DashboardViewer_CustomizeDashboardTitle
            AddHandler dashboardViewer.CustomizeDashboardItemCaption, AddressOf DashboardViewer_CustomizeDashboardItemCaption

            AddHandler dashboardViewer.PopupMenuShowing, AddressOf DashboardViewer_PopupMenuShowing
            AddHandler dashboardViewer.MasterFilterSet, AddressOf DashboardViewer_MasterFilterSet

            dashboardViewer.UpdateDashboardTitle()
            UpdateDashboardItemCaptions()
        End Sub

        Private Sub DashboardViewer_CustomizeDashboardTitle(ByVal sender As Object, ByVal e As CustomizeDashboardTitleEventArgs)
            Dim viewer As DashboardViewer = DirectCast(sender, DashboardViewer)

            ' Display a string of master filter values.
            Dim filterText As String = String.Empty
            For Each item In viewer.Dashboard.Items
                If viewer.CanSetMasterFilter(item.ComponentName) Then
                    Dim filterValues = viewer.GetCurrentFilterValues(item.ComponentName)
                    filterText &= GetFilterText(filterValues)
                End If
            Next item
            Dim toolbarItem As New DashboardToolbarItem()
            toolbarItem.Caption = "Filter: " & filterText
            e.Items.Insert(0, toolbarItem)

            ' Remove the Export button depending on the static variable.
            If Not allowExport Then
                RemoveExportButton(e.Items)
            End If

            ' Add drop-down menu to show/hide dashboard item captions.
            Dim toolbarItemRoot As New DashboardToolbarItem()
            toolbarItemRoot.Caption = "Show/Hide Dashboard Item Captions"
            toolbarItemRoot.SvgImage = svgImageCollection1("title")
            For Each item In viewer.Dashboard.Items
                Dim menuItem As DashboardToolbarMenuItem = New DashboardToolbarMenuItem(item.ShowCaption, item.Name, New Action(Of DashboardToolbarItemClickEventArgs)(Sub(args)
                    item.ShowCaption = Not item.ShowCaption
                End Sub))
                menuItem.ImageOptions.SvgImage = svgImageCollection1("title")
                toolbarItemRoot.MenuItems.Add(menuItem)
            Next item
            e.Items.Insert(0, toolbarItemRoot)

            ' Add a button with an image to navigate to this example online.
            Dim infoLinkItem As DashboardToolbarItem = New DashboardToolbarItem("", New Action(Of DashboardToolbarItemClickEventArgs)(Sub(args)
                System.Diagnostics.Process.Start("https://www.devexpress.com/Support/Center/Example/Details/T630210/")
            End Sub))
            ' Note that a raster image is proportionally resized to 24 px height when displayed in the Title area.
            infoLinkItem.SvgImage = svgImageCollection1("support")
            e.Items.Add(infoLinkItem)
        End Sub

        Private Sub DashboardViewer_CustomizeDashboardItemCaption(ByVal sender As Object, ByVal e As CustomizeDashboardItemCaptionEventArgs)
            ' Remove the Export button depending on the static variable.
            If Not allowExport Then
                If Not e.DashboardItemName.Contains("Map") Then
                    RemoveExportButton(e.Items)
                End If
            End If

            ' Display filter values.
            Dim viewer As DashboardViewer = DirectCast(sender, DashboardViewer)
            Dim filterValues = viewer.GetCurrentFilterValues(e.DashboardItemName)
            If filterValues IsNot Nothing Then
                If filterValues.Count > 0 Then
                    e.FilterText = String.Format(" ( Filter: {0})", String.Concat(filterValues.Select(Function(axp) String.Format("{0} ", axp.GetAxisPoint(axp.AvailableAxisNames(0)).DisplayText)).ToArray()))
                End If
            End If

        End Sub

        Private Sub DashboardViewer_PopupMenuShowing(ByVal sender As Object, ByVal e As DashboardPopupMenuShowingEventArgs)
            ' Hide popup menu everywhere except the dashboard title, to hide commands related to the export actions. 
            If e.DashboardArea = DashboardArea.DashboardItem Then
                e.Allow = False
            End If
        End Sub
        Private Sub DashboardViewer_MasterFilterSet(ByVal sender As Object, ByVal e As MasterFilterSetEventArgs)
            If e.DashboardItemName = "listBoxDashboardItem1" Then
                allowExport = If(e.SelectedValues.Select(Function(value) value(0).ToString()).Contains("Bikes"), False, True)
            End If
            UpdateDashboardItemCaptions()
            dashboardViewer.UpdateDashboardTitle()
        End Sub
        Private Function GetFilterText(ByVal filterValues As IList(Of AxisPointTuple)) As String
            Dim filterText As String = String.Empty
            If filterValues.Count > 0 Then
                Dim dimensionName As String = String.Concat(filterValues.Select(Function(axp) String.Format("{0} ", axp.GetAxisPoint(axp.AvailableAxisNames(0)).Dimension.Name)).Distinct())
                filterText = String.Format(" ({0}:{1})", dimensionName, String.Join(",", filterValues.Select(Function(axp) String.Format(" {0}", axp.GetAxisPoint(axp.AvailableAxisNames(0)).DisplayText)).ToArray()))
            End If
            Return filterText
        End Function
        Private Sub UpdateDashboardItemCaptions()
            For Each i As DashboardItem In dashboardViewer.Dashboard.Items
                dashboardViewer.UpdateDashboardItemCaption(i.ComponentName)
            Next i
        End Sub
        Private Sub RemoveExportButton(ByVal items As IList(Of DashboardToolbarItem))
            Dim exportItem = items.FirstOrDefault(Function(i) i.ButtonType = DashboardButtonType.Export)
            If exportItem IsNot Nothing Then
                items.Remove(exportItem)
            End If
        End Sub
    End Class
End Namespace