New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms BinaryImage Overview

Blondesddsl père et fils
Photo of Frédérique Citeaux
  • Frédérique Citeaux
  • Marketing Manager
  • Strasbourg
  • France
  • 88.60.15.31
Bottom-Dollarhhh Markets
Photo of Elizabeth Lincoln
  • Elizabeth Lincoln
  • Accounting Manager
  • Tsawassen
  • Canada
  • (604) 555-4729
Centro comercial Moctezuma
Photo of Francisco Chang
  • Francisco Chang
  • Marketing Manager
  • México D.F.
  • Mexico
  • (5) 555-3392
Consolidated Holdings
Photo of Elizabeth Brown
  • Elizabeth Brown
  • Sales Representative
  • London
  • UK
  • (171) 555-2282
Du monde entier
Photo of Janine Labrune
  • Janine Labrune
  • Owner
  • Nantes
  • France
  • 40.67.88.88
Eastern Connection
Photo of Ann Devon
  • Ann Devon
  • Sales Agent
  • London
  • UK
  • (171) 555-0297

This example illustrates how to use the built-in GridBinaryImageColumn in RadListView control and how to display an image streamed from a binary image source field (specified through the DataValue property of the column).

About RadBinaryImage for ASP.NET AJAX

RadBinaryImage provides an easy way to display an image which is stored as binary data directly in the database. The control can be used in any data bound control (Repeater, DataList, GridView, RadGrid etc.) to display images which originate from binary image field in the data source. RadBinaryImage uses an internal http handler which streams the image from the binary source to the page in which it has to be visualized.

RadBinaryImage and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Various display settings - you can specify whether you want to display the image as a thumbnail and provide the thumbnail size, alignment, etc
  • Use in any data bound control - use RadBinaryImage with Repeater, DataList, GridView, etc to display images which originate from a binary image field in the data source
  • HTTP Handler - the BinaryImage uses an internal http handler which streams the image from the binary source to the page in which it has to be visualized
  • defaultcs.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecorationZoneID="demo-container" DecoratedControls="All" EnableRoundedCorners="false" />
    <div class="demo-container" id="demo-container">
        <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="SqlDataSource2"
            ItemPlaceholderID="ListViewContainer">
            <LayoutTemplate>
                <div class="RadListView RadListView_<%# Container.Skin %>">
                    <asp:PlaceHolder runat="server" ID="ListViewContainer" />
                </div>
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset>
                    <legend><%#Eval("CompanyName")%></legend>
                    <div class="details">
                        <div class="photo-container">
                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%# Eval("Photo") == DBNull.Value? new System.Byte[0]: 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>
        </telerik:RadListView>
    </div>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="<%$ ConnectionStrings:TelerikConnectionString.ProviderName %>"
        SelectCommand="SELECT TOP 6 * FROM [CustomerPhotos]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance