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

ASP.NET MVC NumericTextBox Prefix and Suffix

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Change Theme
    default
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Ocean Blue A11Y accessibility
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Bootstrap 3
    • Bootstrap 3 Dark
    • Main Dark
    • Nordic
    • Turquoise
    • Turquoise Dark
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Green
    • Green Dark
    • Lavender
    • Lavender Dark
    • Main Dark
    • Metro
    • Metro Dark
    • Moonlight
    • Opal
    • Opal Dark
    • Silver
    • Silver Dark
    • Uniform
    Fluent Theme
    • Main
    Launch Theme Builder
prefix_suffix.cshtml
Prefix_SuffixController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

The Telerik UI for ASP.NET MVC NumericTextBox provides the option for adding custom content like icons, HTML elements, images, and more, as prefix and suffix adornments for enhancing the user interface interactivity.

The prefix input adornment is an element placed before the user input field, and it is commonly used to clarify the expected data in the input, such as currency symbols or unit indicators. The Prefix functionality is set up through the PrefixOptions() configuration, and it supports the following options:

  • Icon()—Inserts an icon before the NumericTextBox element. Accepts the name for an existing icon in the Kendo UI theme or SVG content.
  • Template()—Adds custom content before the NumericTextBox element. You can use a variety of templating options like TemplateId(), TemplateHandler(), and more.
  • Separator(false)—Removes the separator of the prefix adornment. By default, the separator is visible.

The suffix input adornment is an element positioned after the user input field. Usually, it provides direct functionality for the entered data, like password visibility toggles, formatting, or clearing the input. The Suffix functionality is set up through the SuffixOptions() configuration, and it supports the same options as the Prefix feature:

  • Icon()—Inserts an icon after the NumericTextBox element.
  • Template()—Adds custom content for the suffix adornment of the NumericTextBox.
  • Separator(false)—Removes the separator of the suffix adornment. By default, the separator is visible.

This demo shows how to add a DropDownList component before the NumericTextBox and insert HTML content after the NumericTextBox element.

Additional Apps

This NumericTextBox example is part of a unique collection of hundreds of ASP.NET MVC demos, with which you can see all Telerik ASP.NET MVC components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in the ThemeBuilder.

Support & Learning Resources

Additional Resources