Skip to main content
A newer version of this page is available. .

ImageItem Class

An Image dashboard item that displays static images.

Declaration

export class ImageItem extends DashboardItem

Remarks

The image dashboard item is used to add static images to a dashboard.

Image_Web

The following documentation is available:

Example

The following example shows how to create the Image dashboard item and provide a static image by URL. Create the ImageItem instance and use the ImageItem.urlPath property to specify a URL to a static image.

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 createImage(){
    var imageItem = new Model.ImageItem();
    imageItem.urlPath("https://www.devexpress.com/Products/NET/Dashboard/i/dashboard-tablet.png");
    imageItem.sizeMode("Squeeze");

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

Inherited Members

DevExpress.Dashboard.Model.DataDashboardItem.componentName
DevExpress.Dashboard.Model.DataDashboardItem.name
DevExpress.Dashboard.Model.DataDashboardItem.parentContainer
DevExpress.Dashboard.Model.DataDashboardItem.showCaption
DevExpress.Dashboard.Model.DataDashboardItem.getUniqueNamePrefix
See Also

constructor

Initializes a new instance of the ImageItem 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

horizontalAlignment Property

Declaration

horizontalAlignment: ko.Observable<ImageHorizontalAlignment>

Property Value

Type
Observable<ImageHorizontalAlignment>

image64 Property

Declaration

image64: ko.Observable<string>

Property Value

Type
Observable<string>

imageType Property

Declaration

imageType: ko.Observable<string>

Property Value

Type
Observable<string>

sizeMode Property

Declaration

sizeMode: ko.Observable<ImageSizeMode>

Property Value

Type
Observable<ImageSizeMode>

urlPath Property

Declaration

urlPath: ko.Observable<string>

Property Value

Type
Observable<string>

verticalAlignment Property

Declaration

verticalAlignment: ko.Observable<ImageVerticalAlignment>

Property Value

Type
Observable<ImageVerticalAlignment>

Methods

getInfo Method

For internal use.

Declaration

getInfo(): DxDesigner.Analytics.Utils.ISerializationInfoArray

Returns

Type Description
DxDesigner.Analytics.Utils.ISerializationInfoArray