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

    WebForms BinaryImage Overview

    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
    Königlich Essen
    Photo of Philip Cramer
    • Philip Cramer
    • Sales Associate
    • Brandenburg
    • Germany
    • 0555-09876
    La corne d'abondance
    Photo of Daniel Tonini
    • Daniel Tonini
    • Sales Representative
    • Versailles
    • France
    • 30.59.84.10
    La maison d'Asie
    Photo of Annette Roulet
    • Annette Roulet
    • Sales Manager
    • Toulouse
    • France
    • 61.77.61.10
    Laughing Bacchus Wine Cellars
    Photo of Yoshi Tannamuri
    • Yoshi Tannamuri
    • Marketing Assistant
    • Vancouver
    • Canada
    • (604) 555-3392

    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
    Read details on the BinaryImage product page
    • 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