Available in the Full Version

Editors - Numeric Editor MVC

Gross Income

$ 6,000.00

Net Income

$ 6,276.32

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 
@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.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/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.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/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>