Available in the OSS Version

Editors - Data Calculation

This sample shows basic options of the igNumericEditor, igTextEditor, igCheckbox, igPercentEditor, igMaskEditor and igDateEditor, demonstrated with a loan calculator.

To calculate the approximate cost of your monthly installment you can use our credit calculator.

 First name
Last name
Credit amount
Currency
Interest rate
Start date of the credit
Term

This sample is designed for a larger screen size.

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

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <!-- 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" />

    <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>
    <style>
        #container {
            width: 100%;
            min-width: 900px;
            max-width: 900px;
            display: inline-block;
            background-image: url("http://s1.postimg.org/ip7nzwz2n/logo.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: right bottom;
        }

        #igCheckboxEditorsContainer {
            top: 0px;
            left: 0px;
            height: 500px;
            width: 450px;
            padding-top: 15px;
            float: left;
        }

        #ValuesContainer {
            top: 0px;
            right: 0px;
            height: 500px;
            width: 100%;
            padding-top: 15px;
            float: right;
            font-size: 18px;
        }

            #ValuesContainer.p {
                font-size: 16px;
            }
            @media only screen and (max-width:780px){
                #igCheckboxEditorsContainer
                {
                    float: none;
                    height: auto;
                }
                #valuesContainer{
                    margin-top: 20px;
                }
                 #container{
                     background-image:none;
                 }
            }
    </style>

    <p>To calculate the approximate cost of your monthly installment you can use our credit calculator.</p>
    <div id="container">
        <div id="igCheckboxEditorsContainer">
            <form id="form" action="javascript:console.log('Submit');">
                <table>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="firstName"></div></div>
                        </td>
                        <td>
                            First name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="lastName"></div></div>
                        </td>
                        <td>
                            Last name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="creditAmount"></div></div>
                        </td>
                        <td>
                            Credit amount
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="currency"></div></div>
                        </td>
                        <td>
                            Currency
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="interestRate"></div></div>
                        </td>
                        <td>
                            Interest rate
                        </td>
                    </tr>
                     <tr>
                        <td>
                            <div class="divHeight"><div id="startDateOfCredit"></div></div>
                        </td>
                        <td>
                            Start date of the credit
                        </td>
                    </tr> 
                    <tr>
                        <td>
                            <div class="divHeight"><div id="term"></div> </div>
                        </td>
                        <td>
                            Term
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="salaryInBank"></div><label> Is your salary transferred in the bank</label></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><div id="pin"></div> </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="divHeight"><input id="btnReset" type="button" value="Reset" /> <input id="btnEnable" type="button" value="Enable" disabled/> <input type="submit" id="submitBtn" value="Submit" /></div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <div id="valuesContainer">
            <h3>Credit Details:</h3>
            <br>
            <table class="creditTable">
                <tr>
                    <td>
                        Your credit:          
                    </td>
                    <td>
            <div class="divHeight">
                            <div id="resultCredit"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        You will have to return                      
                    </td>
                    <td>
                        <div class="divHeight">
                            <div id="returnValue"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Your monthly payment will be 
                    </td>
                    <td>
                        <div class="divHeight">
                            <div id="monthlyPaymentValue"></div>
            </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <script>
		$(function () {
			var listData = ["EUR", "USD", "GBP"];

			$('#firstName').igTextEditor({
			});

			$('#lastName').igTextEditor({
				toUpper: true
			});

			$('#creditAmount').igNumericEditor({
				placeHolder: "e.g. 3000",
				value: 1000,
				minValue: 500,
				maxValue: 10000
			});

			$('#currency').igTextEditor({
				buttonType: "dropdown",
				listItems: listData,
				visibleItemsCount: 2,
				value: "EUR"
			});

			$('#interestRate').igPercentEditor({
				placeHolder: "Interest rate",
				displayFactor: 1,
				value: "8.70%",
				minValue: 6.70,
				maxValue: 16
			});

			$('#startDateOfCredit').igDatePicker({
				placeHolder: "e.g. " + new Date().getDay().toString() + "/" + new Date().getMonth().toString() + "/" + new Date().getFullYear().toString(),
				minValue: new Date(2015, 5, 1),
				maxValue: new Date(2020, 11, 31),
				value: new Date(),
				locale: "en",
				regional: "en"
			});

			$('#term').igNumericEditor({
				placeHolder: 'Term (months)',
				value: 24,
				minValue: 6,
				maxValue: 120,
				buttonType: "spin",
				spinDelta: 6
			});

			$('#salaryInBank').igCheckboxEditor({
				checked: false,
				valueChanging: function (evt, ui) {
					if (ui.newValue === true) {
						$('#pin').show();
					}
					else {
						$('#pin').hide();
					}
				}
			});

			$('#pin').igMaskEditor({
				placeHolder: 'Enter your PIN',
				inputMask: 'LL-000'
			});

			$("#resultCredit").igCurrencyEditor({
				readOnly: true,
				width: 150
			});

			$("#returnValue").igCurrencyEditor({
				readOnly: true,
				width: 150
			});

			$("#monthlyPaymentValue").igCurrencyEditor({
				readOnly: true,
				width: 150
			});

			$("#form").submit(function (event) {

				//Calculate the total amount of the credit
				var sumToGive = $('#creditAmount').igNumericEditor("option", "value");
				var loanPeriod = $('#term').igNumericEditor("option", "value");
				var salaryIsInBank = $('#salaryInBank').igCheckboxEditor("option", "checked");
				var selectedInterestRate = $('#interestRate').igPercentEditor("option", "value");
				if (salaryIsInBank) {
					selectedInterestRate -= 1;
				}
				var monthlyPaymentNoInterestRate = sumToGive / loanPeriod;
				var interestRate = parseFloat(selectedInterestRate) / 100.0;
				var monthlyInterestRate = monthlyPaymentNoInterestRate * interestRate;
				var monthlyPaymentInterestRate = monthlyPaymentNoInterestRate + monthlyInterestRate;

				var sumToReceive = monthlyPaymentInterestRate * loanPeriod;
				var bankDividend = sumToReceive - sumToGive;

				getResult(sumToGive, sumToReceive, monthlyPaymentInterestRate);

			});

			$("#btnReset").click(function () {
				$("#firstName").igTextEditor("value", "");
				$("#lastName").igTextEditor("value", "");
				$("#creditAmount").igNumericEditor("value", 1000);
				$("#currency").igTextEditor("value", "EUR");
				$('#interestRate').igPercentEditor("value", "8.70%");
				$('#startDateOfCredit').igDatePicker("value", new Date());
				$('#term').igNumericEditor("value", 24);
				$('#salaryInBank').igCheckboxEditor("option", "checked", false);
				$('#pin').igMaskEditor("value", "");
				disableEditors(false);
			});

			$("#btnEnable").click(function () {
				disableEditors(false);
			});

			function getResult(creditAmount, getSumToReceive, getMonthlyPaymentInterestRate) {
				var currencySymbol;
				var selectedCurrency = $('#currency').igTextEditor("option", "value");
				var customerName = $('#lastName').igTextEditor("option", "value");
				var returnAmount = Math.round(getSumToReceive).toFixed(2);
				var monthlyPayment = Math.round(getMonthlyPaymentInterestRate).toFixed(2);
				$(".info").remove();

				switch (selectedCurrency) {
					case "EUR":
						currencySymbol = "€";
						break;
					case "USD":
						currencySymbol = "$";
						break;
					case "GBP":
						currencySymbol = "£";
						break;
					default:
						currencySymbol = "€";
				}
				$("#resultCredit").igCurrencyEditor("option", "currencySymbol", currencySymbol);
				$("#resultCredit").igCurrencyEditor("option", "value", creditAmount);

				$("#returnValue").igCurrencyEditor("option", "currencySymbol", currencySymbol);
				$("#returnValue").igCurrencyEditor("option", "value", returnAmount);

				$("#monthlyPaymentValue").igCurrencyEditor("option", "currencySymbol", currencySymbol);
				$("#monthlyPaymentValue").igCurrencyEditor("option", "value", monthlyPayment);

				var output = "<p class=\"info\">" + "Dear Madam / Sir " + customerName + ", following are the details for your loan: " + "</p>";
				$(".creditTable").before(output);
				$("#valuesContainer").show();
				disableEditors(true);
			}

			function disableEditors(disable) {
				var allEditors = $("#form .ui-igedit-container");
				for (i = 0; i < allEditors.length; i++) {
					var widgetType = Object.keys(allEditors.eq(i).data())[0];
					allEditors.eq(i)[widgetType.toString()]('option', 'disabled', disable);
				}
				$("#btnEnable").prop('disabled', !disable);
			}

			(function doOnLoad() {
				$("#pin").hide();
				$("#valuesContainer").hide();
			}());
		});
    </script>

</body>
</html>