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
() => DxElement

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: {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.

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