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

WebForms BinaryImage Overview

Ana Trujillo Emparedados y helados
Photo of Ana Trujillo
  • Ana Trujillo
  • Owner
  • México D.F.
  • Mexico
  • (5) 555-4729
Antonio Moreno Taquería
Photo of Antonio Moreno
  • Antonio Moreno
  • Owner
  • México D.F.
  • Mexico
  • (5) 555-3932
Around the Horn
Photo of Thomas Hardy
  • Thomas Hardy
  • Sales Representative
  • London
  • UK
  • (171) 555-7788
Berglunds snabbköp
Photo of Christina Berglund
  • Christina Berglund
  • Order Administrator
  • Luleå
  • Sweden
  • 0921-12 34 65
Blauer See Delikatessen
Photo of Hanna Moos
  • Hanna Moos
  • Sales Representative
  • Mannheim
  • Germany
  • 0621-08460
Blondesddsl père et fils
Photo of Frédérique Citeaux
  • Frédérique Citeaux
  • Marketing Manager
  • Strasbourg
  • France
  • 88.60.15.31

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