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

Label

By default, the Rating displays a label that shows the current value out of the max value in the format 3 / 5.

If the Rating does not have a selected value, the label will not be displayed initially and will be toggled after an item is selected.

Getting Started

The following example demonstrates how to use the default label.

    @(Html.Kendo().Rating()
        .Name("rating")
        .Min(1)
        .Max(6)
        .Value(3)
    )
    <kendo-rating name="rating" min="1" max="6" value="3"></kendo-rating>

Customizing the Label

To customize the text of the label, use the Label.TemplateId property. by default, the template automatically receives the value and maxValue in the data object which allows you to use those properties inside the template through the Kendo UI Templates syntax.

    @(Html.Kendo().Rating()
        .Name("rating")
        .Min(1)
        .Max(6)
        .Value(3)
        .Label(l => l.TemplateId("rating-label-template"))
    )

    <script id="rating-label-template" type="text/x-kendo-template">
        <span>
            #: value # out of #: maxValue #
        </span>
    </script>
    <kendo-rating name="rating" min="1" max="6" value="3">
        <label template-id="rating-label-template" />
    </kendo-rating>

    <script id="rating-label-template" type="text/x-kendo-template">
        <span>
            #: value # out of #: maxValue #
        </span>
    </script>

Disabling the Label

Setting the Label property to false prevents the label from being displayed.

    @(Html.Kendo().Rating()
        .Name("rating")
        .Min(1)
        .Max(6)
        .Value(3)
        .Label(false)
    )
    <kendo-rating name="rating" min="1" max="6" value="3">
        <label enabled="false" />
    </kendo-rating>

See Also

In this article