Skip to main content

ImageItem Class

An Image dashboard item that displays static images.

#Declaration

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

javascript
// 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();
}
See Also

#constructor

Initializes a new instance of the ImageItem class.

#Declaration

TypeScript
constructor(
    modelJson?: any,
    serializer?: DevExpress.Analytics.Utils.ModelSerializer
)

#Parameters

Name Type Description
modelJson any

A JSON object used for dashboard deserialization. Do not pass this parameter directly.

serializer ModelSerializer

An object used for dashboard deserialization. Do not pass this parameter directly.

#Properties

#horizontalAlignment Property

#Declaration

TypeScript
horizontalAlignment: ko.Observable<DevExpress.Dashboard.Model.ImageHorizontalAlignment>

#Property Value

Type
Observable<ImageHorizontalAlignment>

#image64 Property

#Declaration

TypeScript
image64: ko.Observable<string>

#Property Value

Type
Observable<string>

#imageType Property

#Declaration

TypeScript
imageType: ko.Observable<string>

#Property Value

Type
Observable<string>

#sizeMode Property

#Declaration

TypeScript
sizeMode: ko.Observable<DevExpress.Dashboard.Model.ImageSizeMode>

#Property Value

Type
Observable<ImageSizeMode>

#urlPath Property

#Declaration

TypeScript
urlPath: ko.Observable<string>

#Property Value

Type
Observable<string>

#verticalAlignment Property

#Declaration

TypeScript
verticalAlignment: ko.Observable<DevExpress.Dashboard.Model.ImageVerticalAlignment>

#Property Value

Type
Observable<ImageVerticalAlignment>