CardItem Class

A Card dashboard item that displays a series of KPI elements (cards), each illustrating the difference between two values.

Declaration

export class CardItem extends KpiItem

Remarks

The Card dashboard item displays a series of cards that can show various value types (an actual and target value, the difference between them, etc.) and indicators (such as a delta indicator or sparkline). To visualize a set of cards (contained in the CardDashboardItem.cards collection), a layout template is required. It is specified using the Card.layoutTemplate property.

Prior to 17.1 version, the Card dashboard item uses the built-in layout template and the Card.layoutTemplate property is null. We recommend updating dashboard card item settings to specify new layout templates. For more information, see Layout.

See the Web Dashboard - Creating Cards topic for more information about Cards.

Example

The following example shows how to create the Card dashboard item, bind it to data and add to the existing dashboard.

Create data items (measures and dimensions) and use the DataItem.dataMember property to bind them to the existing data source’s columns. Then use the created measures and dimensions in the dashboard item to bind it to data.

After you add the created dashboard item to the Dashboard.items collection, call the Dashboard.rebuildLayout method to rebuild the dashboard layout and display changes.

// Use the line below for a modular approach:
// import * as Model from 'devexpress-dashboard/model'
// Use the line below for an approach with global namespaces:
// var Model = DevExpress.Dashboard.Model;

// ...
public createCardItem() { 
    // Create data items for the Card dashboard item.
    var cardCategory = new Model.Dimension();
    cardCategory.dataMember("Category");
    var cardRevenueQTD = new Model.Measure();
    cardRevenueQTD.dataMember("RevenueQTD");
    var cardRevenueQTDTarget = new Model.Measure();
    cardRevenueQTDTarget.dataMember("RevenueQTDTarget");

    // Create the Card dashboard item and bind it to data.
    var cardItem = new Model.CardItem();
    var card = new Model.Card(cardItem);

    cardItem.name('cards');
    cardItem.dataSource(excelDataSource.componentName());

    card.name("card");
    card.actualValue(cardRevenueQTD);
    card.targetValue(cardRevenueQTDTarget);
    cardItem.cards.push(card);
    cardItem.seriesDimensions.push(cardCategory);

    control.dashboard().items.push(cardItem);
    // ...
    control.dashboard().rebuildLayout();
}

Inherited Members

colorScheme

coloringOptions

componentName

contentArrangementMode

contentLineCount

customProperties

dataItems

dataMember

dataSource

disposed

filterString

formatRules

hiddenDimensions

hiddenMeasures

interactivityOptions

isDisposed

isMasterFilterCrossDataSource

itemType

name

parentContainer

seriesDimensions

showCaption

visibleDataFilterString

dispose

getInfo

getUniqueNamePrefix

Inheritance

SerializableModel TypedSerializableModel DashboardItem DataDashboardItem SeriesItem KpiItem CardItem

constructor

Initializes a new instance of the CardItem class.

Declaration

constructor(
    modelJson?: any,
    serializer?: DevExpress.Analytics.Utils.ModelSerializer
)

Parameters

A JSON object used for dashboard deserialization. Do not pass this parameter directly.

| | serializer | ModelSerializer |

An object used for dashboard deserialization. Do not pass this parameter directly.

|

Properties

cards Property

Gets the collection of objects that provide data for calculating values displayed within cards.

Declaration

cards: ko.ObservableArray<DevExpress.Dashboard.Model.Card>

Property Value

A collection of Card objects that provide data for calculating values displayed within cards.

|

sparklineArgument Property

Declaration

sparklineArgument: ko.Observable<DevExpress.Dashboard.Model.Dimension>

Property Value