Image

Image allows you to display a both static and dynamic image within defined mode (default, fill, uniform and uniform to fill).

Image rendered in image widget

You may add image of supported formats including, BMP, JPG, JPEG, GIF, EMF, JFIF, JPE, PNG, RLE, TIF, TIFF, WMF, DIB, and ICO from your local machine or column binding to the image widget.

The following steps represents to add Image to dashboard.

Drag and drop the image widget into the Canvas.

How to configure the data to Image widget?

You may browse the image or bind a datasource column for Image widget. Binding column must be in binary or string format for image widget.

You may assign a data by clicking Assign Data button.

Default view of widget dropped in canvas

Drag and drop image column from dimension section to Column(s) section.

Column dropping into data pane

You can format the image for better illustration of the view that you require, through the settings available in Properties pane.

Editing heading in properties panel

This allows you to set title for this Image widget.

SubHeading

This allows you to set the subtitle for Image widget.

Description

This allows you to set description for this Image widget, whose visibility will be denoted by i icon, hovering which will display this description in tooltip.

Basic Settings

Editing properties in properties window

Mode

You can customize the image showcase style through Mode setting in the Design Tools pane or properties pane.

Default

The image will be displayed in its original size.

Image rendered in default mode

Fill

The image will be filled in the available space.

Image rendered in fill mode

Uniform to Fill

The image will be uniformly occupying the space but gets clipped, if it is larger than control

Image rendered in uniform to fill mode

Uniform

The image sizes proportionally (without clipping) to best fit to the widget area.

Image rendered in uniform mode

Browse Image

You can browse the image from your local system.

Browse image setting in properties window

NOTE

Image that having special characters in the file name is not supported in Dashboard Application.

Bind From Database

you can able to bind image from the datasource through this support. First image of bound column will be shown in the image widget

Image Source

Image datasource can be binded in two ways.

  • Binary Data
  • URI

Binary Data

you can able to view binary data image through this option.

Binding binary type image column to image widget

URI

URI images can be bind through this option and we can also able to add different columns value as a placeholder through the placeholder textbox.

Binding pattern to pass the column value as parameter to image URL

Binding direct image URI

Ex: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxlVqMSd30Qah-lV4zXbDimmEc0-BYovuJMdDvvAhNIU6l79Nd

Forming URI through placeholder

EX: http://js.syncfusion.com/image/{0}/32/{1}.jpg

Binding image name column to data pane in image widget

Preview of image widget

Filter Settings

IgnoreFilterActions

You can ignore the filter actions by enabling IgnoreFilterActions property. Browse Image will not act as a slave widget.

Container Appearance

Image Export

You can export the image widget as image.

PDF Export

You can export the image widget as PDF.