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

WebForms BinaryImage Overview

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
FISSA Fabrica Inter. Salchichas S.A.
Photo of Diego Roel
  • Diego Roel
  • Accounting Manager
  • Madrid
  • Spain
  • (91) 555 94 44
Folk och fä HB
Photo of Maria Larsson
  • Maria Larsson
  • Owner
  • Bräcke
  • Sweden
  • 0695-34 67 21
Frankenversand
Photo of Peter Franken
  • Peter Franken
  • Marketing Manager
  • München
  • Germany
  • 089-0877310

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