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