RadBinaryImage gives you an easy way of showing an image stored as binary data in a database. The control can be used in any data bound control
(Repeater, DataList, GridView, etc.) to display images which originate from binary image field in the data source. The control
uses an internal http handler which streams the image from the binary source to the page in which it has to be visualized.
The storage of the binary stream when transferred between the control itself and the handler is the HttpContext.Current.Cache object and the image is cached in the
browser. Its default expiration time is 2 hours (unless the control in which the RadBinaryImage is nested is rebound or recreated). This means that subsequent
loads of the binary image are taken from the browser cache when using the same url for access. In case the browser cache is disabled, the image will be persisted for 2 minutes on
the server before it is streamed to the page from the data source.
The most important properties of the RadBinaryImage control are presented in the table from the next paragraph:
|
Property
|
Description
|
| DataValue |
Property which specifies the source field from which the data will be passed as a byte array |
| Height |
Specifies the height of the binary image
|
| Width |
Specifies the width of the binary image
|
| AlternateText |
The text that will replace the image when it is not available/cannot be streamed |
| ToolTip |
The text that will be displayed in a browser tooltip when you hover the image |
| AutoAdjustImageControlSize |
Scales the image based on explicitly set width/height dimensions to avoid stretch or blur effect when its original dimensions do not
fit. The default value is true.
|
|
HttpHandlerUrl
|
Can be used to specify the location of a custom http handler which extends the default RadBinaryImage http handler. When not
set, RadBinaryImage has its own handler which is invoked through the common Telerik.WebResource.axd handler.
|
| ImageUrl |
Applicable when no DataValue is specified to gracefully degrade to regular ASP.NET Image mode. When null
value is returned from the source, the ImageUrl property can be used to specify default image for RadBinaryImage |
| ImageAlign |
Specifies the image alignment inside its container. |
| ResizeMode |
Specifies whether the image should be sized automatically if width and height of the image are set in pixels. Possible values are:
- Crop (the image will be trimmed)
- Fit (the image will be sized to fit the given dimensions)
- None (default)
|
| SavedImageName |
Sets image’s filename which will appear inside SaveAs browser dialog if image is saved |
Here is an online demo which demonstrates how to integrate
RadBinaryImage as part of ASP.NET Repeater template. The screen shot from the result is available below:
and the source code:
| ASPX/ASCX |
 Copy Code |
<html xmlns="http://www.w3.org/1999/xhtml">
< head id="Head1" runat="server">
<link href="stylesheet.css" rel="stylesheet"
type="text/css" />
</head>
<body class="BODY">
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<asp:Repeater runat="server" ID="Repeater1" DataSourceID="SqlDataSource2">
<ItemTemplate>
<fieldset style="float: left; width: 350px; height: 150px;">
<legend><b>Company Name</b>:
<%#Eval("CompanyName")%></legend>
<div class="details">
<div
class="photo-container">
<telerik:RadBinaryImage
runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("Photo") %>'
AutoAdjustImageControlSize="false"
Width="90px" Height="110px" ToolTip='<%#Eval("ContactName",
"Photo of {0}") %>'
AlternateText='<%#Eval("ContactName",
"Photo of {0}") %>' />
</div>
<div
class="data-container">
<ul>
<li>
<label>
Contact
Name:</label>
<%#Eval("ContactName")%>
</li>
<li>
<label>
Title:</label>
<%#Eval("ContactTitle")%>
</li>
<li>
<label>
City:</label>
<%#Eval("City")%>
</li>
<li>
<label>
Country:</label>
<%#Eval("Country")%>
</li>
<li>
<label>
Phone:</label>
<%#Eval("Phone")%>
</li>
</ul>
</div>
</div>
</fieldset>
</ItemTemplate>
</asp:Repeater>
<div style="clear: both;">
</div>
<telerik:RadFormDecorator runat="server" ID="radFormDecorator" DecoratedControls="All" />
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<$
ConnectionStrings>"
ProviderName="<$ ConnectionStrings>"
SelectCommand="SELECT TOP 6 * FROM [CustomerPhotos]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
|
Unsupported scenarios
- RadBinaryImage doesn't work in WebFarm / WebGarden scenarios