RadialGauge Overview

Telerik UI for ASP.NET Core Ninja image

The RadialGauge 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 RadialGauge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI RadialGauge widget.

The RadialGauge represents values on a circular arc.

Initializing the RadialGauge

The following example demonstrates how to initialize the RadialGauge.

    @(Html.Kendo().RadialGauge()
          .Name("radialGauge") // The name of the RadialGauge is mandatory. It specifies the "id" attribute of the widget.
          .Scale(scale => scale
              .Min(0) // Set the min value of the RadialGauge.
              .Max(200) // Set the min value of the RadialGauge.
          )
          .Pointer(pointer => pointer
              .Value(10) // Set the value of the RadialGauge.
          )
    )
    <kendo-radialgauge name="radialGauge">
        <radialgauge-pointers>
            <pointer value="10"></pointer>
        </radialgauge-pointers>
        <scale min="0" max="200">
        </scale>
    </kendo-radialgauge>

Referencing Existing Instances

To reference an existing Kendo UI RadialGauge instance, use the jQuery.data() configuration option. Once a reference is established, use the RadialGauge client-side API to control its behavior.

    // Place the following after the RadialGauge for ASP.NET Core declaration.
    <script>
        $(function() {
            // The Name() of the RadialGauge is used to get its client-side instance.
            var gauge = $("#radialGauge").data("kendoRadialGauge");
        });
    </script>

See Also

In this article