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

Templates

The WebForms Badge enables you to customize the text that appears inside of the component.

This demo shows how to customize the content of the Badge by using templates.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • style.css
<%@ Page Language="c#" AutoEventWireup="true"  CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Demos.Badge.Overview.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="style.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 flex-center" runat="server">
        <telerik:RadCard runat="server" Width="500px">
            <telerik:CardHeaderComponent runat="server">
                Items
            </telerik:CardHeaderComponent>
            <telerik:CardBodyComponent runat="server">
                <ul class="k-listgroup">
                    <li class="k-listgroup-item">
                        <a href="#" class="k-link">Inbox
                        <telerik:RadBadge runat="server" ThemeColor="Info">
                            <Template>
                                99+
                            </Template>
                        </telerik:RadBadge>
                        </a>
                    </li>
                    <li class="k-listgroup-item">
                        <a href="#" class="k-link">Sent Items
                            <telerik:RadBadge runat="server" ThemeColor="Success">
                                <Template>
                                    15 Items
                                </Template>
                            </telerik:RadBadge>
                        </a>
                    </li>
                    <li class="k-listgroup-item">
                        <a href="#" class="k-link">Missed conversations
                        <telerik:RadBadge runat="server" ThemeColor="Warning">
                            <Template>
                                a lot
                            </Template>
                        </telerik:RadBadge>
                        </a>
                    </li>
                </ul>
            </telerik:CardBodyComponent>
        </telerik:RadCard>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance