WebForms Avatar Overview
The Telerik WebForms Avatar is typically used to display images, icons or initials representing people or other entities. It also gives you the flexibility to customize its border radius, size, color, etc. This component is an ASP.NET WebForms wrapper over the Kendo UI Avatar widget.
To see the Avatar in action, you can check out the live examples at WebForms Avatar demos.
The WebForms Avatar is part of Telerik UI for ASP.NET AJAX, a
professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Create the Avatar
To create the Avatar in the markup, add a telerik:RadAvatar element to the page and configure its options.
<telerik:RadAvatar runat="server" ID="RadAvatar1" Text="AA" />
To create the Avatar on the server, create a new instance of the RadAvatar object, set its options and add it to the Controls collection of another control (e.g. PlaceHolder1)
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
protected void Page_Init(object sender, EventArgs e)
{
RadAvatar avatar = new RadAvatar();
avatar.ID = "RadAvatar1";
avatar.Text = "AA";
PlaceHolder1.Controls.Add(avatar);
}
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Init
Dim avatar As RadAvatar = New RadAvatar()
avatar.ID = "RadAvatar1"
avatar.Text = "AA"
PlaceHolder1.Controls.Add(avatar)
End Sub
Creating controls programmatically must be done in an early event such as PreInit (preferably), Init. For more details you can check out the ASP.NET Page Life-Cycle Events
Get Client-side reference
The following example demonstrates getting Client-side reference to the Avatar at Page Load.
<telerik:RadAvatar runat="server" ID="RadAvatar1" Skin="Default" Text="AA" />
<script>
function pageLoadHandler(sender, args) {
var avatar = $find('<%= RadAvatar1.ClientID %>');
}
Sys.Application.add_load(pageLoadHandler);
</script>
For more details about referencing Telerik Controls on the Client-side, you can check out the Getting Client-Side References article.
Accessibility
You can set the alternate name for the Avatar image through the Alt property. Applicable when the Avatar is set to Type="Image". This value will be used to populate the alt attribute of the <img> element.
The Avatar is a non-focusable element.