Skip to content

Latest commit

 

History

History
202 lines (173 loc) · 6.39 KB

overview.md

File metadata and controls

202 lines (173 loc) · 6.39 KB
title page_title description slug position
Overview
Overview
Learn the basics when working with the Telerik UI Badge component for {{ site.framework }}.
overview_badgehelper_aspnetcore
0

{{ site.framework }} Badge Overview

{% if site.core %} The Telerik UI Badge TagHelper and HtmlHelper for {{ site.framework }} are server-side wrappers for the Kendo UI Badge widget. {% else %} The Telerik UI Badge HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI Badge widget. {% endif %}

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>

{% if site.core %}

    @addTagHelper *, Kendo.Mvc

    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
        <kendo-badge name="badge" text="42">
        </kendo-badge>
    </a>

{% endif %}

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>

{% if site.core %}

    @addTagHelper *, Kendo.Mvc

    <span class='k-icon k-i-envelop'>
        <kendo-badge name="badge" 
            text="+2" 
            theme-color="BadgeColor.Primary" 
            position="BadgePosition.Outside"
            align="BadgeAlign.TopEnd"
            rounded="Rounded.Full"
            size="BadgeSize.Medium">
        </kendo-badge>
    </span>

{% endif %}

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>

{% if site.core %}

    <a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
        <kendo-badge name="badge" 
            text="42" 
            rounded="Rounded.Full"
            template="#= this._text > 10 ? '9+' : this._text #">
        </kendo-badge>
    </a>

{% endif %}

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]({% slug htmlhelper_grid_template_columns%}).

    @(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>

{% if site.core %}


    @addTagHelper *, Kendo.Mvc

    @(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="text/html" id="orderTemplate">
        #if(OrderID <= 10){#
            <kendo-badge name="flag#=OrderID#"
                         theme-color="BadgeColor.Success"
                         text="New"
                         is-in-client-template="true">
            </kendo-badge>                         
        #}#
        #if(OrderID > 10){#
            <kendo-badge name="flag#=OrderID#"
                         theme-color="BadgeColor.Error"
                         text="Old"
                         is-in-client-template="true">
            </kendo-badge>
        #}#
    </script>

{% endif %}

    function initBadges(e) {
        $(".templateCell").each(function(){
            eval($(this).children("script").last().html());
        });
    }

Functionality and Features

  • [Appearance]({% slug appearance_badge_aspnetcore %})—Use different configuration settings that control the styling of the component.

Next Steps

See Also