Search results

How To

Customize spin up and down icons

This section explains about how to change/customize spin up and down icons. You can customize spin button icons using e-spin-up and e-spin-down classes of those buttons.

You can override the default icons of e-spin-up and e-spin-down classes using the following CSS code snippets.

  .e-numeric .e-input-group-icon.e-spin-up:before {
    content: "\e823";
    color: rgba(0, 0, 0, 0.54);
  }
  .e-numeric .e-input-group-icon.e-spin-down:before {
    content: "\e814";
    color: rgba(0, 0, 0, 0.54);
  }
razor
buttons.cs
@section ControlsSection{
 @Html.EJS().NumericTextBox("numeric").Value(10).Render()
}

<style>
    /* csslint ignore:start */
   .e-numeric .e-input-group-icon.e-spin-up:before {
        content: "\e823";
        color: rgba(0, 0, 0, 0.54);
   }

   .e-numeric .e-input-group-icon.e-spin-down:before {
        content: "\e814";
        color: rgba(0, 0, 0, 0.54);
   }
   /* csslint ignore:end */
</style>
public ActionResult Buttons()
{
    return View();
}

Output be like the below.

NumericTextBox Sample

Customize step value and hide spin buttons

The spin buttons allow you to increase or decrease the value with the predefined step value. The visibility of spin buttons can be set using theshowSpinButton property.

razor
icons.cs
@section ControlsSection{
 @Html.EJS().NumericTextBox("numeric").Value(16).Min(10).Max(100).ShowSpinButton(false).Render()
}
public ActionResult Icons()
{
    return View();
}

Output be like the below.

NumericTextBox Sample

Change the appearance of NumericTextBox

You can change the appearance of the NumericTextBox by adding custom cssClass to the component and enabling styles. Refer to the following example to change the appearance of the NumericTextBox.

razor
customCss.cs
@section ControlsSection{

    @Html.EJS().NumericTextBox("numeric").Value(10).Render()
    
}

<style>
  .e-numeric.e-style .e-control.e-numerictextbox  {
    color: royalblue ;
    font-size: xx-large ;
    border: 0px ;
  }

  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) {
    border-color: royalblue;
  }

  .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-down  {
    color:royalblue;
  }

  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before {
    background: royalblue ;
  }

  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after {
    background: royalblue ;
   }

  .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-up {
    color:royalblue ;
  }

  .e-control-wrapper.e-numeric.e-float-input.e-style.e-input-group .e-float-text.e-label-top {
    color: royalblue;
    font-size: medium;
  }

</style>
public ActionResult customCss()
{
    return View();
}

Output be like the below.

NumericTextBox Sample

Perform custom validation on NumericTextBox using FormValidator

This section explains how to perform custom validation on the NumericTextBox using FormValidator. The NumericTextBox will be validated when the value changes or the user clicks the submit button. Validation can be performed by adding custom validation in the rules collection of the FormValidator.

razor
customValidation.cs
@section ControlsSection{
   <form id="form-element">
        @Html.EJS().NumericTextBox("numeric").Min(10).Max(100).Change("onChange").Created("onCreate").StrictMode(false).Render()
        @Html.EJS().Button("submit_btn").CssClass("e-flat e-primary").Content("submit").Render()
    </form>
}

 <script>
        function onCreate() {
            document.getElementById(this.element.id).setAttribute("name", "numericRange");
        }
        function onChange(args) {
            if (numeric.value != null) {
                formObject.validate("numericRange");
            }
        }
        var customFn = function (args) {
            if (numeric.value >= 10 && numeric.value <= 100) {
                return true;
            }
            else {
                return false;
            }
        };
        // sets required property in the FormValidator rules collection
        var options = {
          rules: {
            'numericRange': { required: [true, "Number is required"] },
          },
        };
         // defines FormValidator to validate the NumericTextBox
        var formObject = new ej.inputs.FormValidator('#form-element', options);

        // places error label outside the NumericTextBox using the customPlacement event of FormValidator

        formObject.customPlacement = function (element, errorElement) {
           element.parentNode.parentNode.appendChild(errorElement);
        };

        formObject.addRules('numericRange', { range: [customFn, "Please enter a number between 10 to 100"] });
        
        document.getElementById("submit_btn").addEventListener('click', function () {
            formObject.validate("numericRange");
            var ele = document.getElementById('numeric');
            // checks for incomplete value and alerts the formt submit
            if (ele.value !== "" && ele.value >= 10 && ele.value <= 100) {
                alert("Submitted");
            }
        });

 </script>

 <style>
     .e-numeric.e-control-wrapper {
        margin-bottom: 20px;
    }
     label.e-error {
        margin-top: -50px;
    }
</style>
public ActionResult customValidation()
{
    return View();
}

Output be like the below.

NumericTextBox Sample

Prevent nullable input in NumericTextBox

By default, the value of the NumericTextBox sets to null. In some applications, the value of the NumericTextBox should not be null at any instance. In such cases, following sample can be used to prevent nullable input in NumericTextBox.

razor
nullableInput.cs
@section ControlsSection{
   @Html.EJS().NumericTextBox("numeric").Created("onCreate").Render()
}

<script>
 function onCreate(args) {
     if (this.value == null) {
         this.value = 0;
     }
 document.getElementById("numeric").addEventListener("blur", function () {
     var numericObj = document.getElementById("numeric").ej2_instances[0]
        if (numericObj.value == null) {
            numericObj.value = 0;
        }
 });
}
</script>
public ActionResult nullableInput()
{
    return View();
}

Output be like the below.

NumericTextBox Sample

Maintain trailing zeros in NumericTextBox

By default, trailing zeros disappear when the NumericTextBox gets focus. However, you can use the following sample to maintain the trailing zeros while focusing the NumericTextBox.

razor
trailingZeros.cs
@section ControlsSection{

 @Html.EJS().NumericTextBox("numeric").Format("n2").Value(10).Decimals(2).Change("numericFocus").Created("onCreate").Render()

}

<script>
  function numericFocus() {
      var numericObj = this.ej2_instances ? this.ej2_instances[0] : this;
      numericObj.element.value = numericObj.formattedValue(numericObj.decimals, +numericObj.element.value);
  }
  function onCreate() {
      document.getElementById('numeric').addEventListener('focus', numericFocus);
  }
</script>
public ActionResult nullableInput()
{
    return View();
}

MVC For and Model Binding

This section demonstrates the Strongly typed extension support in NumericTextBox. The view which bind with any model is called as strongly typed view. You can bind any class as model to view. You can access model properties on that view. You can use data associated with model to render controls.

In this sample, first click the submit button to post the selected value in the MaskedTextBox. When posting the null value, validation error message will be shown below the NumericTextBox.

razor
modelBinding-core.cs
modelBinding-mvc.cs
@using Syncfusion.EJ2.Inputs
@using Syncfusion.EJ2
@model EJ2MVCSampleBrowser.Controllers.NumericValue
@section ControlsSection{
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <div class="col-lg-12 control-section">
            <div id="wrapper">
                @Html.EJS().NumericTextBoxFor(model => model.value, (Syncfusion.EJ2.Inputs.NumericTextBox)ViewData["Numeric"]).Width("200px").Render()
                <div>
                    @Html.ValidationMessageFor(model => model.value)
                </div>
                <div id="submitbutton">
                    @Html.EJS().Button("btn").Content("Post").Render()
                </div>
            </div>
        </div>
    }

    <style>
        #wrapper {
            max-width: 246px;
            margin: 30px auto;
            padding-top: 50px;
        }

        #submitbutton {
            margin-top: 20px;
            margin-left: 65px;
        }

        #control-content #wrapper .field-validation-error {
            color: red;
        }
    </style>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using System.ComponentModel.DataAnnotations;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class NumericValue
    {
        [Required]
        public int value { get; set; }

    }
    public partial class NumericTextBoxController : Controller
    {
        public IActionResult DefaultFunctionalities()
        {
            NumericValue val = new NumericValue();
            val.value = 10;
            return View(val);
        }
        [HttpPost]
        public IActionResult DefaultFunctionalities(NumericValue model)
        {
            NumericValue val = new NumericValue();
            val.value = model.value;
            return View(val);
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace EJ2MVCSampleBrowser.Controllers
{
    public class NumericValue
    {
        [Required(ErrorMessage = "Value is required")]
        public int value { get; set; }
    }
    public partial class NumericTextboxController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            NumericValue num = new NumericValue();
            num.value = 10;
            Syncfusion.EJ2.Inputs.NumericTextBox num1 = new Syncfusion.EJ2.Inputs.NumericTextBox();
            num1.Max = 100;
            ViewData["Numeric"] = num1;
            return View(num);
        }
        [HttpPost]
        public ActionResult DefaultFunctionalities(NumericValue model)
        {

            NumericValue num = new NumericValue();
            num.value = 10;
            Syncfusion.EJ2.Inputs.NumericTextBox num1 = new Syncfusion.EJ2.Inputs.NumericTextBox();
            num1.Min = 2;
            ViewData["Numeric"] = num1;
            return View(model);
        }
    }

}

Output be like the below.

NumericTextBox Sample