Skip to main content

CardWidget Interface

A Card underlying widget that visualizes a Card dashboard item’s data.

#Declaration

TypeScript
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.

JavaScript
"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

TypeScript
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

TypeScript
element: () => DevExpress.core.DxElement

#Property Value

Type
() => DxElement

#onCustomizeText Property

A handler for the event allowing you to customize text displayed within individual cards.

#Declaration

TypeScript
onCustomizeText: (args: {
    getValue: () => any;
    getDefaultText: () => string;
}) => string

#Property Value

Type Description
(args: {getDefaultText: () => string, getValue: () => any}) => string

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.

JavaScript
"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";
                }
            };
        }
    }
}