ASP.NET MVC Badge Overview
The Badge is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Badge widget.
The Badge is an absolutely positioned element that is used to decorate buttons, navigation menus, or other components in the application when the visual notification is needed.
The component allows you to customize its content through templates, to control its appearance and rendering by setting different sizes, colors, and more.
Initializing the Badge
The following example demonstrates how to define a Badge.
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
@(Html.Kendo().Badge()
.Name("badge")
.Text("42")
)
</a>
Basic Configuration
The Badge provides a variety of options for positioning and alignment. The following example shows how to render the Badge outside at the top right corner of the parent container.
<span class='k-icon k-i-envelop'>
@(Html.Kendo().Badge()
.Name("badge")
.Text("+2")
.ThemeColor(BadgeColor.Primary)
.Position(BadgePosition.Outside)
.Align(BadgeAlign.TopEnd)
.Rounded(Rounded.Full)
.Size(BadgeSize.Medium)
)
</span>
Using a Template
You can customize the Badge content through the Template() method. This feature is useful when the Badge content depends on a specific condition, such as user permissions, the value of a global variable, or today's date.
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
@(Html.Kendo().Badge()
.Name("badge")
.Text("42")
.Template("#= this._text > 10 ? '9+' : this._text #")
.Rounded(Rounded.Full)
)
</a>
Using Badge as a Label
You can integrate the Badge into other UI components. The following example demonstrates how to use it as a label in the 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());
});
}
Functionality and Features
- Appearance—Use different configuration settings that control the styling of the component.