Available in the Full Version

Editors - Numeric Editor MVC

Gross Income

$ 6,000.00

Net Income

$ 6,276.32

Federal Tax % State Tax % Social Security % Medicare %

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates the basic functionality of the igNumericEditor control.

Code View

Copy to Clipboard

ASP.NET View
ASP.NET Controller

                @using Infragistics.Web.Mvc


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
    <style>
        #payment {
            width: 50%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 20px;
        }

        #salary {
            float: left;
        }

        #salary > p {
            margin-bottom: 20px;
        }

        .sample-page h2 {
            margin-top: 0;
        }

        #deduction {
            float: right;
        }

        #deduction label {
            display: block;
        }

        .ui-igedit-container {
            margin-bottom: 15px;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        @@media screen and (max-width:785px) {
            #payment {
                width: 60%;
            }
        }

        @@media screen and (max-width:685px) {
            #payment {
                width: 100%;
            }
        }

        @@media screen and (max-width:420px) {
            #salary, #deduction {
                float: none;
            }
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <div id="payment" class="clearfix">
        <div id="salary">
            <h2>Gross Income</h2>
            <p id="gross">$ 6,000.00</p>
            <h2>Net Income</h2>
            <p id="nett">$ 6,276.32</p>
        </div>
        <div id="deduction">
            <label for="federalTax">Federal Tax %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("federalTax")
                        .Value(10)
                        .ListItems(new List<object>() { 10, 15, 25, 28, 33, 35 })
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())
            <label for="stateTax">State Tax %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("stateTax")
                        .ButtonType(TextEditorButtonType.Spin)
                        .SpinDelta(0.01)
                        .MinValue(-5.53)
                        .MaxValue(5.53)
                        .Value(-5.00)
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())
            <label for="socialSecurity">Social Security %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("socialSecurity")
                        .Value(-10.0)
                        .MinValue(-12.4)
                        .MaxValue(12.4)
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())
            <label for="medicare">Medicare %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("medicare")
                        .Value(2.9)
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())

        </div>
    </div>
    <script>
            function changingValue() {
                var newNettIncome = nettChange().toLocaleString();
                $("#nett").text("$ " + newNettIncome);
            }

            function nettChange() {

            	var gross = 6000.00, nett, grossMadicare, grossSecurity, grossFederalTax, grossStateTax;
            	var federalTax = $("#federalTax").igNumericEditor("value");
            	var stateTax = $("#stateTax").igNumericEditor("value");
            	var socialSecurity = $("#socialSecurity").igNumericEditor("value");
            	var medicare = $("#medicare").igNumericEditor("value");

            	grossSecurity = (gross * socialSecurity) / 100;
            	grossMadicare = (gross * medicare) / 100;
            	gross = gross - (grossSecurity + grossMadicare);


            	grossFederalTax = (gross * federalTax) / 100;
            	grossStateTax = (gross * stateTax) / 100;

            	nett = gross - (grossFederalTax + grossStateTax);

            	return parseFloat(nett.toFixed(2));

            }
    </script>

</body>
</html>

                 using IgniteUI.SamplesBrowser.Models.DataAnnotations;
using IgniteUI.SamplesBrowser.Models.Northwind;
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class EditorsController : Controller
    {
        //
        // GET: /Editors/

        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation()
        {
            ValidatedOrder model = new ValidatedOrder();
			ViewData["message"] = String.Empty;
			model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [HttpPost]
        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation(ValidatedOrder model)
        {
			if (ModelState.IsValid)
			{
				ViewData["message"] = "Product saved successfully";
			}
            model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [ActionName("load-and-save-form-values")]
        public ActionResult EditProduct()
        {
            Product product = RepositoryFactory.GetProductRepository().Get().First();
            ViewData["message"] = String.Empty;
            return View("load-and-save-form-values", product);
        }

        [ActionName("text-editor-mvc")]
        public ActionResult TextEditor()
        {
            return View();
        }

        [ActionName("date-editor-mvc")]
        public ActionResult DateEditor()
        {
            return View();
        }

        [ActionName("numeric-editor-mvc")]
        public ActionResult NumericEditor()
        {
            return View();
        }

        [ActionName("mask-editor-mvc")]
        public ActionResult MaskEditor()
        {
            return View();
        }

        public List<SelectListItem> GetShipMethods()
        {
            List<SelectListItem> selectList = new List<SelectListItem>()
            {
                new SelectListItem { Text = "Standard", Value = "Standard" },
                new SelectListItem { Text = "One Day", Value = "OneDay" },
                new SelectListItem { Text = "Two Day", Value = "TwoDay" },
                new SelectListItem { Text = "International", Value = "International" }
            };
            return selectList;
        }

    }
}

Ignite UI for jQuery | Samples

Search Results

Editors - Numeric Editor MVC

Gross Income

Net Income

Code View