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

Integration with Grid

Contact NameContact Title
Maria Anders 		Sales Representative
Ana Trujillo 		Owner
Antonio Moreno 		Owner
Thomas Hardy 		Sales Representative
Christina Berglund 		Order Administrator
Hanna Moos 		Sales Representative
Frédérique Citeaux 		Marketing Manager
Martín Sommer 		Owner
Laurence Lebihan 		Owner
Elizabeth Lincoln 		Accounting Manager
Victoria Ashworth 		Sales Representative
Patricio Simpson 		Sales Agent
Francisco Chang 		Marketing Manager
Yang Wang 		Owner
Pedro Afonso 		Sales Associate
Elizabeth Brown 		Sales Representative
Sven Ottlieb 		Order Administrator
Janine Labrune 		Owner
Ann Devon 		Sales Agent
Roland Mendel 		Sales Manager
12345
Page size:
 91 items in 5 pages

This demo shows how the Telerik WebForms Avatar Control can be used inside the Telerik WebForms Grid.

You can use the ASP.NET inline expressions, more specifically the <%# ... %> data-binding expression to set the Avatar properties.

For example
Image='<%# Eval("ImageUrl") %>'

With that in mind, you can place the Avatar within the Server Templates of another Control (e.g. Grid) and use the Bind expression to populate the Avatar's properties.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Avatar.ApplicationScenarios.GridIntegration.DefaultCS"  %>

<%@ 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 href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg" runat="server">

        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="700px" DataSourceID="SqlDataSource1" PageSize="20" Height="550px">
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="CustomerID" Name="Customers">
                <Columns>
                    <telerik:GridTemplateColumn DataField="ContactName" HeaderText="Contact Name">
                        <ItemTemplate>
                            <telerik:RadAvatar runat="server" Size="Large" Type="Image"
                                Image='<%# string.Format("https://demos.telerik.com/aspnet-ajax/Img/Northwind/Customers/Thumbs/{0}.jpg", Eval("CustomerID")) %>' />
                            <asp:Label runat="server" CssClass="contact-name" Text='<%# Eval("ContactName") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="Contact Title"></telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            </ClientSettings>
        </telerik:RadGrid>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CustomerID], [ContactName], [ContactTitle] FROM [Customers]">
        </asp:SqlDataSource>

    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance