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);
  }
tagHelper
buttons.cs
@section ControlsSection{

  <ejs-numerictextbox id="numeric" value="10"></ejs-numerictextbox>
}
<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.

tagHelper
icons.cs
@section ControlsSection{

  <ejs-numerictextbox id="numeric" value="16" showSpinButton="false" step="2" min="10" max="100"></ejs-numerictextbox>

}
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.

tagHelper
customCss.cs
@section ControlsSection{

       <ejs-numerictextbox id="numeric" format="n2" value="10" Type="text" placeholder="numerictextbox" floatLabelType="Always" cssClass="e-style"></ejs-numerictextbox>
}

<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.

tagHelper
customValidation.cs
@section ControlsSection{
        <form id="form-element">
            <ejs-numerictextbox id="numeric" name="numericRange" min="10" max="100" change="onChange" placeholder="NumericTextBox" strictMode="false" floatLabelType="Always"></ejs-numerictextbox>
            <ejs-button type="button" id="submit_btn" content="submit" style="margin-top: 10px"></ejs-button>
        </form>
}
    <script>
        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 MaskedTextBox
        var formObject = new ej.inputs.FormValidator('#form-element', options);

        // places error label outside the MaskedTextBox 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.

tagHelper
nullableInput.cs
@section ControlsSection{

    <div id='container'>
        <div class='wrap'>
            <ejs-numerictextbox id="numeric" value="10" placeholder="NumericTextBox" floatLabelType="Always" created="onCreate"></ejs-numerictextbox>
        </div>
    </div>
}

<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.

tagHelper
trailingZeros.cs
@section ControlsSection{

    <ejs-numerictextbox id="numeric" value="10" decimals="2" format="n2" change="numericFocus" created="onCreate"></ejs-numerictextbox>
}

  <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.

tagHelper
modelBinding-core.cs
modelBinding-mvc.cs
@using Syncfusion.EJ2
@*@model directive allows you to access the model values*@
@model EJ2CoreSampleBrowser.Controllers.NumericValue
@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="control-label">
                <div class="numeric-section">
                    <form method="post">
                        <ejs-numerictextbox id="numeric" name="value" ejs-for="@Model.value" ></ejs-numerictextbox>
                        <div id="errorMessage">
                            <span asp-validation-for="value"></span>
                        </div>
                        <div id="submitbutton">
                            <ejs-button id="submitButton" content="Submit"></ejs-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
}

<style>
    .content-wrapper {
        width: 35%;
        margin: 0 auto;
        min-width: 185px;
    }

    .e-float-input.e-numeric.e-input-group {
        margin-top: 40px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }
    #errorMessage {
        color: red;
        text-align: center
    }
    #submitbutton {
        margin: 10px auto;
        text-align: center;
    }
</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