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

WebForms BinaryImage Overview

Gourmet Lanchonetes
Photo of André Fonseca
  • André Fonseca
  • Sales Associate
  • Campinas
  • Brazil
  • (11) 555-9482
Great Lakes Food Market
Photo of Howard Snyder
  • Howard Snyder
  • Marketing Manager
  • Eugene
  • USA
  • (503) 555-7555
Hanari Carnes
Photo of Mario Pontes
  • Mario Pontes
  • Accounting Manager
  • Rio de Janeiro
  • Brazil
  • (21) 555-0091
HILARION-Abastos
Photo of Carlos Hernández
  • Carlos Hernández
  • Sales Representative
  • San Cristóbal
  • Venezuela
  • (5) 555-1340
Hungry Coyote Import Store
Photo of Yoshi Latimer
  • Yoshi Latimer
  • Sales Representative
  • Elgin
  • USA
  • (503) 555-6874
Hungry Owl All-Night Grocers
Photo of Patricia McKenna
  • Patricia McKenna
  • Sales Associate
  • Cork
  • Ireland
  • 2967 542

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