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

Labels

5 open 90 closed

Implement lazy loading

Opened 13 days ago by starku

Scrolling freezes in Firefox

Opened 2 days ago by gink

Keyboard navigation throws an exception

Opened 1 day ago by toydivas

Improve searching performance

Opened 12 days ago by peterC

Add documentation for lazy loading

Opened 11 days ago by starku

The WebForms Badge can be used as a label to another element.

This demo shows how to use the Badge component as a label in the template of a Listview.

  • 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:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource" ItemPlaceholderID="PlaceHolder1">
            <LayoutTemplate>
                <telerik:RadCard runat="server">
                    <telerik:CardHeaderComponent runat="server">
                        <span>
                            <span class="k-svg-icon k-icon">
                                <svg viewBox="0 0 512 512">
                                    <path d="M224 128h64v160h-64zm0 256h64v-64h-64zm256-128c0 123.7-100.3 224-224 224S32 379.7 32 256 132.3 32 256 32s224 100.3 224 224m-32 0c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192"></path>
                                </svg>
                            </span>
                            5 open
                        </span>
                        <span>
                            <span class="k-svg-icon k-icon">
                                <svg viewBox="0 0 512 512">
                                    <path d="M434.7 82.7 480 128 192 416 32 256l45.3-45.3L192 325.5z"></path>
                                </svg>
                            </span>
                            90 closed
                        </span>
                    </telerik:CardHeaderComponent>
                    <telerik:CardBodyComponent runat="server">
                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                    </telerik:CardBodyComponent>
                </telerik:RadCard>
            </LayoutTemplate>
            <ItemTemplate>
                <div class="listview-item">
                    <div>
                        <h4 class="issue-title"><%# Eval("Title") %></h4>
                        <telerik:RadBadge runat="server" Text='<%# Eval("SecondBadgeText") %>' ThemeColor='<%# Eval("SecondBadgeThemeColor") %>' Size="Small" Visible='<%# Eval("Visible") %>' />
                        <telerik:RadBadge runat="server" Text='<%# Eval("Text") %>' ThemeColor='<%# Eval("ThemeColor") %>' Size="Small" />
                    </div>
                    <p class="issue-meta"><small><%# Eval("Description") %></small></p>
                </div>
            </ItemTemplate>
        </telerik:RadListView>
    </div>

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

Support & Learning Resources

Find Assistance