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 KpiItemRemarks
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
Inheritance
constructor
Initializes a new instance of the CardItem class.
Declaration
constructor(
modelJson?: any,
serializer?: DxDesigner.Analytics.Utils.ModelSerializer
)Parameters
| Name | Type | Description |
|---|---|---|
| modelJson | any | A JSON object used for a dashboard deserialization. Do not pass this parameter directly. |
| serializer | DxDesigner.Analytics.Utils.ModelSerializer | An object used for a 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<Card>Property Value
| Type | Description |
|---|---|
| ObservableArray<Card> | A collection of Card objects that provide data for calculating values displayed within cards. |
sparklineArgument Property
Declaration
sparklineArgument: ko.Observable<Dimension>Property Value
| Type |
|---|
| Observable<Dimension> |
Methods
getInfo Method
For internal use.
Declaration
getInfo(): DxDesigner.Analytics.Utils.ISerializationInfoArrayReturns
| Type | Description |
|---|---|
| DxDesigner.Analytics.Utils.ISerializationInfoArray |
|