New to Kendo UI for jQuery? 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.

   <input id="rating" name="rating">

    <script>
        $(document).ready(function() {
            $("#rating").kendoRating({
                min: 1,
                max: 6,
                value: 3
            });
        });
    </script>

Customizing the Label

To customize the text of the label, use the label.template option. 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.

    <input id="rating" name="rating">

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

    <script>
        $("#rating15").kendoRating({
            min: 1,
            max: 6,
            value: 3,
            label: { template: kendo.template($("#template").html()) }
        });
    </script>

Disabling the Label

Setting the label option to false prevents the label from being displayed.

    <input id="rating" name="rating">

    <script>
        $(document).ready(function() {
            $("#rating").kendoRating({
                min: 1,
                max: 6,
                value: 3,
                label: false
            });
        });
    </script>

See Also

In this article