How to: Bind the Card Dashboard Item to Data and Customize the Card Layout

• Jul 23, 2019
• 3 minutes to read

This example creates a Card dashboard item in code, bind it to data and customize the card layout.

To apply a custom card template, create the CardCustomLayoutTemplate instance and assign it to the Card.LayoutTemplate property of a Card object. Specify the required settings and add the Card object to the CardDashboardItem.Cards collection.

Note

The complete sample project How to Create a Custom Template for the Card Dashboard Item is available in the DevExpress Examples repository.

Form1.cs

using DevExpress.DashboardCommon;

namespace CustomCardsLayout
{
    public partial class Form1 : DevExpress.XtraBars.Ribbon.RibbonForm
    {
        public Form1()
        {
            InitializeComponent();
            dashboardDesigner1.CreateRibbon();

            Dashboard dashboard = new Dashboard();
            DashboardObjectDataSource salesDataSource = CreateDataSource();
            dashboard.DataSources.Add(salesDataSource);

            CardDashboardItem cardItem = new CardDashboardItem();
            CreateCards(cardItem, salesDataSource);
            dashboard.Items.Add(cardItem);
            dashboardDesigner1.Dashboard = dashboard;
        }

        private void CreateCards(CardDashboardItem cardItem, DashboardObjectDataSource salesDataSource)
        {
            cardItem.DataSource = salesDataSource;
            Card card = new Card();
            card.ActualValue = new Measure("Sales", SummaryType.Sum);
            card.TargetValue = new Measure("SalesTarget", SummaryType.Sum);
            cardItem.SeriesDimensions.Add(new Dimension("State"));
            cardItem.SparklineArgument = new Dimension("CurrentDate", DateTimeGroupInterval.MonthYear);

            CardCustomLayoutTemplate customTemplate = new CardCustomLayoutTemplate();
            CardRow row1 = new CardRow();
            CardRowDataElement dimensionValue_row1 = new CardRowDataElement(CardRowDataElementType.DimensionValue, 0, 
                CardHorizontalAlignment.Left, 14, System.Drawing.Color.DarkBlue);
            CardRowIndicatorElement deltaIndicator_row1 = new CardRowIndicatorElement(CardHorizontalAlignment.Right, 22);
            row1.Elements.AddRange(dimensionValue_row1, deltaIndicator_row1);

            CardRow row2 = new CardRow();
            CardRowTextElement staticText_row2 = new CardRowTextElement("Sales: ", CardHorizontalAlignment.Left, 12, 
                CardPredefinedColor.Neutral);
            CardRowDataElement salesValue_row2 = new CardRowDataElement(CardRowDataElementType.ActualValue, 
                CardHorizontalAlignment.Left, 12, CardPredefinedColor.Main);
            row2.Elements.AddRange(staticText_row2, salesValue_row2);

            CardRow row3 = new CardRow();
            CardRowTextElement staticText_row3 = new CardRowTextElement("Target: ", CardHorizontalAlignment.Left, 12, 
                CardPredefinedColor.Neutral);
            CardRowDataElement salesValue_row3 = new CardRowDataElement(CardRowDataElementType.TargetValue, 
                CardHorizontalAlignment.Left, 12, CardPredefinedColor.Main);
            row3.Indent = 30;
            row3.Elements.AddRange(staticText_row3, salesValue_row3);

            CardSparklineRow row4 = new CardSparklineRow();
            row4.VerticalAlignment = CardVerticalAlignment.Bottom;

            customTemplate.Layout = new CardLayout();
            customTemplate.Layout.Rows.AddRange(row1, row2, row3, row4);
            card.LayoutTemplate = customTemplate;
            cardItem.Cards.Add(card);            
        }

        private DashboardObjectDataSource CreateDataSource()
        {
            DashboardObjectDataSource salesDataSource = new DashboardObjectDataSource();
            salesDataSource.DataSource = typeof(SalesOverviewDataGenerator);
            salesDataSource.DataMember = "GetData";
            salesDataSource.Fill();
            return salesDataSource;
        }
    }
}

Form1.vb

Imports DevExpress.DashboardCommon

Namespace CustomCardsLayout
    Partial Public Class Form1
        Inherits DevExpress.XtraBars.Ribbon.RibbonForm

        Public Sub New()
            InitializeComponent()
            dashboardDesigner1.CreateRibbon()

            Dim dashboard As New Dashboard()
            Dim salesDataSource As DashboardObjectDataSource = CreateDataSource()
            dashboard.DataSources.Add(salesDataSource)

            Dim cardItem As New CardDashboardItem()
            CreateCards(cardItem, salesDataSource)
            dashboard.Items.Add(cardItem)
            dashboardDesigner1.Dashboard = dashboard
        End Sub

        Private Sub CreateCards(ByVal cardItem As CardDashboardItem, ByVal salesDataSource As DashboardObjectDataSource)
            cardItem.DataSource = salesDataSource
            Dim card As New Card()
            card.ActualValue = New Measure("Sales", SummaryType.Sum)
            card.TargetValue = New Measure("SalesTarget", SummaryType.Sum)
            cardItem.SeriesDimensions.Add(New Dimension("State"))
            cardItem.SparklineArgument = New Dimension("CurrentDate", DateTimeGroupInterval.MonthYear)

            Dim customTemplate As New CardCustomLayoutTemplate()
            Dim row1 As New CardRow()
            Dim dimensionValue_row1 As New CardRowDataElement(CardRowDataElementType.DimensionValue, 0, CardHorizontalAlignment.Left, 14, System.Drawing.Color.DarkBlue)
            Dim deltaIndicator_row1 As New CardRowIndicatorElement(CardHorizontalAlignment.Right, 22)
            row1.Elements.AddRange(dimensionValue_row1, deltaIndicator_row1)

            Dim row2 As New CardRow()
            Dim staticText_row2 As New CardRowTextElement("Sales: ", CardHorizontalAlignment.Left, 12, CardPredefinedColor.Neutral)
            Dim salesValue_row2 As New CardRowDataElement(CardRowDataElementType.ActualValue, CardHorizontalAlignment.Left, 12, CardPredefinedColor.Main)
            row2.Elements.AddRange(staticText_row2, salesValue_row2)

            Dim row3 As New CardRow()
            Dim staticText_row3 As New CardRowTextElement("Target: ", CardHorizontalAlignment.Left, 12, CardPredefinedColor.Neutral)
            Dim salesValue_row3 As New CardRowDataElement(CardRowDataElementType.TargetValue, CardHorizontalAlignment.Left, 12, CardPredefinedColor.Main)
            row3.Indent = 30
            row3.Elements.AddRange(staticText_row3, salesValue_row3)

            Dim row4 As New CardSparklineRow()
            row4.VerticalAlignment = CardVerticalAlignment.Bottom

            customTemplate.Layout = New CardLayout()
            customTemplate.Layout.Rows.AddRange(row1, row2, row3, row4)
            card.LayoutTemplate = customTemplate
            cardItem.Cards.Add(card)
        End Sub

        Private Function CreateDataSource() As DashboardObjectDataSource
            Dim salesDataSource As New DashboardObjectDataSource()
            salesDataSource.DataSource = GetType(SalesOverviewDataGenerator)
            salesDataSource.DataMember = "GetData"
            salesDataSource.Fill()
            Return salesDataSource
        End Function
    End Class
End Namespace