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

Integration with Grid

Contact NameContact Title
Aria Cruz 		Marketing Assistant
Diego Roel 		Accounting Manager
Martine Rancé 		Assistant Sales Agent
Maria Larsson 		Owner
Peter Franken 		Marketing Manager
Carine Schmitt 		Marketing Manager
Paolo Accorti 		Sales Representative
Lino Rodriguez 		Sales Manager
Eduardo Saavedra 		Marketing Manager
José Pedro Freyre 		Sales Manager
André Fonseca 		Sales Associate
Howard Snyder 		Marketing Manager
Manuel Pereira 		Owner
Mario Pontes 		Accounting Manager
Carlos Hernández 		Sales Representative
Yoshi Latimer 		Sales Representative
Patricia McKenna 		Sales Associate
Helen Bennett 		Marketing Manager
Philip Cramer 		Sales Associate
Daniel Tonini 		Sales Representative
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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Avatar.ApplicationScenarios.GridIntegration.DefaultVB"  %>

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