CardWidget Interface
A Card underlying widget that visualizes a Card dashboard item’s data.
#Declaration
export interface CardWidget
#Remarks
The following code snippet shows how to customize specific text displayed within the Card dashboard item using the onCustomizeText handler. You can use this code inside the onItemWidgetCreated handler.
"viewerApi": {
onItemWidgetCreated: function (e) {
if (e.itemName == "cardDashboardItem1") {
var card = e.getWidget();
card.onCustomizeText = function(args) {
if (args.getValue() == "UK") {
return "United Kingdom";
}
if (args.getValue() == "USA") {
return "United States";
}
};
}
}
}
#Properties
#cardBackColor Property
Specifies the background color for a card.
#Declaration
cardBackColor: string
#Property Value
Type | Description |
---|---|
string | A string that specifies the HTML color used to paint a card’s background. |
#element Property
Gets the root element of the widget.
#Declaration
element: () => DevExpress.core.DxElement
#Property Value
Type |
---|
() => Dx |
#onCustomizeText Property
A handler for the event allowing you to customize text displayed within individual cards.
#Declaration
onCustomizeText: (args: {
getValue: () => any;
getDefaultText: () => string;
}) => string
#Property Value
Type | Description |
---|---|
(args: {get |
A function used to customize texts displayed within individual cards. |
#Remarks
The following code snippet shows how to customize specific text displayed within the Card dashboard item using the onCustomizeText handler. You can use this code inside the onItemWidgetUpdated / onItemWidgetCreated handlers.
"viewerApi": {
onItemWidgetUpdated: function (e) {
if (e.itemName == "cardDashboardItem1") {
var card = e.getWidget();
card.onCustomizeText = function(args) {
if (args.getValue() == "UK") {
return "United Kingdom";
}
if (args.getValue() == "USA") {
return "United States";
}
};
}
}
}