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

Integration with Grid

Contact NameContact Title
Anabela Domingues 		Sales Representative
Helvetius Nagy 		Sales Associate
Palle Ibsen 		Sales Manager
Mary Saveley 		Sales Agent
Paul Henriot 		Accounting Manager
Rita Müller 		Sales Representative
Pirkko Koskitalo 		Accounting Manager
Paula Parente 		Sales Manager
Karl Jablonski 		Owner
Matti Karttunen 		Owner/Marketing Assistant
Zbyszek Piestrzeniewicz 		Owner
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