Binary Image

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadBinaryImage - Telerik's ASP.NET BinaryImage

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

tlrk.it/1cJfeip To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1cJfeip

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 80+ 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.

About This Demo

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).


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular BinaryImage demo, you can use the following path to find it in the sample website application:
binaryimage/examples/overview

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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/BinaryImage/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Overview of RadBinaryImage tutorial for ASP.NET</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="SqlDataSource2"
        ItemPlaceholderID="ListViewContainer" Skin="Office2010Silver">
        <LayoutTemplate>
            <asp:PlaceHolder runat="server" ID="ListViewContainer" />
        </LayoutTemplate>
        <ItemTemplate>
            <fieldset style="float: left; width: 350px; height: 150px;">
                <legend><b>Company Name</b>:
                    <%#Eval("CompanyName")%></legend>
                <div class="details">
                    <div class="photo-container">
                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%# IIf(Eval("Photo") IsNot DBNull.Value, Eval("Photo"),New System.Byte(-1) {})%>'
                            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 style="clear: both;">
    </div>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="<%$ ConnectionStrings:TelerikConnectionString.ProviderName %>"
        SelectCommand="SELECT TOP 6 * FROM [CustomerPhotos]"></asp:SqlDataSource>

     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/BinaryImage.png" AlternateText="tlrk.it/1cJfeip" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1cJfeip">tlrk.it/1cJfeip</a>
    </div>

    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here