Badge Overview
The Badge is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Badge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Badge widget.
The Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when the visual notification is needed.
It also provides customizing its content through templates, setting different types and layouts.
Initializing the Badge
The following example demonstrates how to define the Badge.
<a class="k-button">
@(Html.Kendo().Badge()
.Name("badge")
.Value("42")
.Appearance("rectangle"))
</a>
<a class="k-button">
<kendo-badge name="badge" value="42" appearance="rectangle">
</kendo-badge>
</a>
Basic Configuration
The badge also provides the choice to be inline or overlay and set its type. To make the badge overlay add the k-badge-overlay class to the parent parent element.
<a class="k-button k-badge-overlay">
@(Html.Kendo().Badge()
.Name("badge")
.Value("42")
.Type("warning")
.Appearance("rectangle"))
</a>
<a class="k-button k-badge-overlay">
<kendo-badge name="badge" value="42" type="warning" appearance="rectangle">
</kendo-badge>
</a>
Using templates
With the badge you can customize the content using templates.
<a class="k-button k-badge-overlay">
@(Html.Kendo().Badge()
.Name("badge")
.Value("42")
.Template("#= +value > 10 ? '9+' : value #")
.Appearance("rectangle"))
</a>
<a class="k-button k-badge-overlay">
<kendo-badge name="badge" value="42" type="warning" appearance="rectangle" template="#= +value > 10 ? '9+' : value #">
</kendo-badge>
</a>
Using as a label
You can integrate the Badge into other UI components. The following example demonstrates how to use it as a label in Grid client column templates.
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound("OrderID").HtmlAttributes(new { @class = "templateCell" }).ClientTemplateId("orderTemplate");
})
.Events(ev => ev.DataBound("initBadges"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
<script type="kendo-template" id="orderTemplate">
#if(OrderID <= 10){#
@(Html.Kendo().Badge()
.Name("flag#=OrderID#")
.ThemeColor(BadgeColor.Success)
.Text("New")
.ToClientTemplate()
)
#}#
#if(OrderID > 10){#
@(Html.Kendo().Badge()
.Name("flag#=OrderID#")
.ThemeColor(BadgeColor.Error)
.Text("Old")
.ToClientTemplate()
)
#}#
</script>
function initBadges(e) {
$(".templateCell").each(function(){
eval($(this).children("script").last().html());
});
}
Referencing Existing Instances
You can access an existing Button instance by using the jQuery.data() method which gets executed by the jQuery object of the originating element. Once the reference is established, use the Badge client-side API to control its behavior.
<a class="k-button k-badge-overlay">
@(Html.Kendo().Badge()
.Name("badge")
.Value("42")
.Template("#= +value > 10 ? '9+' : value #")
.Appearance("rectangle"))
</a>
<script>
var badge = $('#badge').data('kendoBadge');
</script>
<a class="k-button k-badge-overlay">
<kendo-badge name="badge" value="42" type="warning" appearance="rectangle">
</kendo-badge>
</a>
<script>
var badge = $('#badge').data('kendoBadge');
</script>