LinearGauge HtmlHelper Overview

The Telerik UI LinearGauge HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI LinearGauge widget.

The LinearGauge represents values on a linear scale.

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which renders the view.

    public ActionResult Index()
    {
        return View();
    }
    
  3. Add a LinearGauge.

        <%: Html.Kendo().LinearGauge()
            .Name("linearGauge") // The name of the LinearGauge is mandatory. It specifies the "id" attribute of the LinearGauge.
            .Scale(scale => scale
                .Min(0) // Set the min value of the LinearGauge.
                .Max(200) // Set the min value of the LinearGauge.
            )
            .Pointer(pointer => pointer
                .Value(10) // Set the value of the LinearGauge.
            )
        %>
    
        @(Html.Kendo().LinearGauge()
            .Name("linearGauge") // The name of the LinearGauge is mandatory. It specifies the "id" attribute of the LinearGauge.
            .Scale(scale => scale
                .Min(0) // Set the min value of the LinearGauge.
                .Max(200) // Set the min value of the LinearGauge.
            )
            .Pointer(pointer => pointer
                .Value(10) // Set the value of the LinearGauge.
            )
        )
    

Referencing Existing Instances

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

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

See Also

In this article
Not finding the help you need? Improve this article