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

Integration with Grid

Contact NameContact Title
Annette Roulet 		Sales Manager
Yoshi Tannamuri 		Marketing Assistant
John Steel 		Marketing Manager
Renate Messner 		Sales Representative
Jaime Yorres 		Owner
Carlos González 		Accounting Manager
Felipe Izquierdo 		Owner
Fran Wilson 		Sales Manager
Giovanni Rovelli 		Marketing Manager
Catherine Dewey 		Sales Agent
Jean Fresnière 		Marketing Assistant
Alexander Feuer 		Marketing Assistant
Simon Crowther 		Sales Associate
Yvonne Moncada 		Sales Agent
Rene Phillips 		Sales Representative
Henriette Pfalzheim 		Owner
Marie Bertrand 		Owner
Guillermo Fernández 		Sales Representative
Georg Pipps 		Sales Manager
Isabel de Castro 		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