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.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
To calculate the approximate cost of your monthly installment you can use our credit calculator.
Credit Details:
| Your credit: |
|
| You will have to return |
|
| Your monthly payment will be |
|
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.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" />
<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>
<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>