NumericTextBox HtmlHelper Overview

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

The NumericTextBox allows the user to select numeric values through direct input or using spinner buttons.

Initializing the NumericTextBox

The following example demonstrates the basic configuration for the NumericTextBox.

    @(Html.Kendo().NumericTextBox()
          .Name("numerictextbox") // The name of the NumericTextBox is mandatory. It specifies the "id" attribute of the widget.
    )

Functionality and Features

Events

You can subscribe to all NumericTextBox events. For a complete example on basic NumericTextBox events, refer to the demo on using the events of the NumericTextBox.

The following example demonstrates how to subscribe to events by a handler name.

    @(Html.Kendo().NumericTextBox()
          .Name("numerictextbox")
          .Events(e => e
                .Change("numerictextbox_change")
                .Spin("numerictextbox_spin")
          )
    )
    <script>
    function numerictextbox_spin() {
        // Handle the spin event.
    }

    function numerictextbox_change() {
        // Handle the change event.
    }
    </script>

Referencing Existing Instances

To get a reference to the NumericTextBox, always use the id attribute instead of a class selector. Behind the scenes, the NumericTextBox creates a secondary element that represents the visual look of the helper and copies all non-id attributes including the class. When you use the class for referencing the NumericTextBox, this behavior causes unexpected results.

The following example demonstrates how to get a reference to an existing instance.

    @(Html.Kendo().NumericTextBox()
          .Name("numerictextbox") // The name of the NumericTextBox is mandatory. It specifies the "id" attribute of the helper.
    )

    <script>
        var numericTextBox = $('#numerictextbox').data('kendoNumericTextBox'); // numericTextBox is a reference to the instance of the helper.
    </script>

See Also

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