Available in the OSS Version
Editors - Basic Use
The sample demonstrates most of the available editor controls.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Measurement units
Total:
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>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style>
#container
{
width: 100%;
min-width: 900px;
max-width: 900px;
display: inline-block;
}
#formContainer
{
top: 0px;
left: 0px;
height: 500px;
width: 750px;
padding-top: 15px;
float: left;
margin-left: 20px;
}
.element
{
width: 200px;
margin-right: 40px;
float: left;
height: 3.75em;
}
.element.mid
{
margin-left: 240px;
margin-top: 20px;
}
p.inline
{
display: inline-block;
}
#total
{
font-weight: bold;
font-size: large;
text-align: right;
}
#successMessageDiv
{
position: relative;
bottom: 0;
text-align: center;
font-size: larger;
color: green;
}
#client
{
margin-top: 85px;
}
#delivery
{
margin-top: 145px;
}
#submitPurchase{
float:right;
margin-right:75px;
margin-top:10px;
}
#mainInfo
{
margin-bottom: 80px;
margin-top: 25px;
}
@media only screen and (max-width: 780px)
{
#container
{
height: 600px;
}
.element
{
float: none;
margin: 10px 0 10px 0 !important;
}
#client
{
margin-top: 0;
}
#delivery
{
margin-top: 0;
}
#priceContainer
{
margin-top: 0;
margin-left: 0;
}
#mainInfo
{
margin-bottom: 0;
}
#successMessageDiv
{
text-align: unset;
position:absolute;
}
#submitPurchase{
float:left;
}
}
</style>
<div id="container">
<div id="formContainer">
<p class="inline">Measurement units</p>
<input type="radio" name="radioMeasurement" id="radioMetric" value="metric" onchange="radioChange()" checked />
<label for="radioM">metric</label>
<input type="radio" name="radioMeasurement" id="radioImperial" value="imperial" onchange="radioChange()" />
<label for="radioI">imperial</label>
<div id="mainInfo">
<div class="element">
<label for="client">Client</label>
<input id="clientName" type="text" name="client" />
</div>
<div class="element">
<label for="address">Delivery address</label>
<input id="deliveryAddress" name="address" />
</div>
<div class="element">
<label for="pricem3">Price per cubic meter</label>
<input id="price" name="pricem3" />
</div>
</div>
<div id="client">
<div class="element">
<label for="mail">Contact email</label>
<input id="clientMail" name="mail" />
</div>
<div class="element">
<label for="date">Delivery date</label>
<input id="deliveryDate" name="date" />
</div>
<div class="element">
<label for="amountm3">Amount in cubic meter</label>
<input id="amount" name="amountm3" />
</div>
</div>
<div id="delivery">
<div class="element mid">
<input id="freeDelivery" />
<label for="freeDelivery">Apply free delivery</label>
</div>
<div class="element">
<label for="applyDiscount">Apply discount</label>
<input id="discount" name="applyDiscount" />
</div>
</div>
<div id="priceContainer">
<div id="submitPurchase">
<p id="total">Total: </p>
<input type="submit" id="createOrder" value="Create Purchase Order" style="height: 25px; width: 200px;" onclick="createNewOrder()" />
<div id="successMessageDiv">
<p id="successMessage" class="inline"></p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#clientName').igTextEditor({
placeHolder: "Company name"
});
$('#clientMail').igTextEditor({
placeHolder: "someone@example.com"
});
$('#clientMail').igValidator({
email: true,
notificationOptions: {
direction: "bottom",
mode: "popover"
}
});
$('#deliveryAddress').igTextEditor({
placeHolder: "Street address, P.O. box"
});
$('#deliveryDate').igDateEditor({
placeHolder: "12/30/2015"
});
$('#freeDelivery').igCheckboxEditor({
size: "small",
valueChanged: function (e, args) {
var totalText = $("#total").text().replace("Total: ", ""),
total = parseFloat(totalText, 10);
if (args.newValue) {
total = total - 20;
} else {
total = total + 20;
}
$("#total").text("Total: " + total);
}
});
$('#price').igCurrencyEditor({
value: "79",
minValue : 0,
currencySymbol: "€"
});
$('#amount').igNumericEditor({
dataMode: "int",
value: 10,
minValue: 1,
blur: function (evt) {
calculateTotalPrice();
}
});
$('#discount').igPercentEditor({
value: 0.08,
minValue: 0
});
$(document).delegate("#price", "igcurrencyeditorblur", function (evt) {
calculateTotalPrice();
});
$(document).delegate("#discount", "igpercenteditorblur", function (evt) {
calculateTotalPrice();
});
calculateTotalPrice();
function radioChange() {
var radioMetric = document.getElementById("radioMetric");
if (radioMetric.checked) {
var imperialPrice = $('#price').igCurrencyEditor("option", "value");
//Change the currency symbol to Euros
$('#price').igCurrencyEditor("option", "currencySymbol", "€");
//Calculate the price in Euros
$('#price').igCurrencyEditor("option", "value", calculateNewPrice(imperialPrice));
//Update labels to Metric units
$("label[for='pricem3']").text("Price per cubic meter");
$("label[for='amountm3']").text("Amount in cubic meter");
//Update igNumericEditor
//Update the amount in cubic meter
var yardAmount = $('#amount').igNumericEditor("option", "value");
$('#amount').igNumericEditor("option", "value", calculateNewAmount(yardAmount));
//Update Total price
calculateTotalPrice();
}
else {
//Update igCurrencyEditor
var metricPrice = $('#price').igCurrencyEditor("option", "value");
//Change the currency symbol to Dollar
$('#price').igCurrencyEditor("option", "currencySymbol", "$");
//Calculate the price in Dollars
$('#price').igCurrencyEditor("option", "value", calculateNewPrice(metricPrice));
//Update labels to Imperial units
$("label[for='pricem3']").text("Price per cubic yard");
$("label[for='amountm3']").text("Amount in cubic yard");
//Update igNumericEditor
//Update the amount in cubic yard
var metricAmount = $('#amount').igNumericEditor("option", "value");
$('#amount').igNumericEditor("option", "value", calculateNewAmount(metricAmount));
//Update Total price
calculateTotalPrice();
}
}
function calculateNewPrice(oldPrice) {
var radioMetric = document.getElementById("radioMetric");
var newPrice;
if (radioMetric.checked) {
newPrice = oldPrice * 0.8;
return newPrice;
}
else {
newPrice = oldPrice * 1.25;
return newPrice;
}
}
function calculateNewAmount(oldAmount) {
var radioMetric = document.getElementById("radioMetric");
var newAmount;
if (radioMetric.checked) {
newAmount = oldAmount * 0.77;
return newAmount;
}
else {
newAmount = oldAmount * 1.30;
return newAmount;
}
}
function calculateTotalPrice() {
var pricePerUnit = $('#price').igCurrencyEditor("option", "value");
var unitsAmount = $('#amount').igNumericEditor("option", "value");
var discount = $('#discount').igPercentEditor("option", "value");
var pricePerUnitWithDiscount = pricePerUnit - (pricePerUnit * discount);
var totalPrice = pricePerUnitWithDiscount * unitsAmount;
$("#total").text("Total: " + Math.round10(totalPrice, -2));
}
function createNewOrder() {
$("#successMessage").text("Order successfully created!");
$("#successMessage").stop(true, true).fadeIn(200).fadeOut(3000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'basic-usabe.ts' ).then( null, console.error.bind( console ) );
</script>
</body>
</html>
import { Component, NgModule, OnChanges } from '@angular/core';
import { IgCurrencyEditorComponent, IgDateEditorComponent, IgMaskEditorComponent, IgNumericEditorComponent,
IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent, IgValidatorComponent, IgCheckboxEditorComponent } from "/src/igniteui.angular2";
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
@Component({
selector: 'my-app',
template: `
<style>
#container {
width: 100%;
min-width: 900px;
max-width: 900px;
display: inline-block;
}
#formContainer {
top: 0px;
left: 0px;
height: 500px;
width: 750px;
padding-top: 15px;
float: left;
margin-left: 20px;
}
.element {
width: 200px;
margin-right: 40px;
float: left;
height: 3.75em;
}
.element.mid {
margin-left: 240px;
margin-top: 20px;
}
p.inline {
display: inline-block;
}
#total {
font-weight: bold;
font-size: large;
text-align: right;
}
#successMessageDiv {
position: relative;
bottom: 0;
text-align: center;
font-size: larger;
color: green;
}
#client {
margin-top: 85px;
}
#delivery {
margin-top: 145px;
}
#submitPurchase {
float: right;
margin-right: 75px;
margin-top: 10px;
}
#mainInfo {
margin-bottom: 80px;
margin-top: 25px;
}
</style>
<div id="formContainer">
<div id="mainInfo">
<div class="element" style="margin-right: 40px;">
<label for="client">Client</label>
<ig-text-editor [(ngModel)]="clientvalue" [options]="{placeHolder: 'Company name'}"></ig-text-editor>
</div>
<div class="element" style="margin-right: 40px;">
<label for="address">Delivery address</label>
<ig-text-editor [(ngModel)]="editors.address" [options]="{placeHolder: 'Street address, P.O. box'}"></ig-text-editor>
</div>
<div class="element">
<label for="pricem3">Price per cubic meter</label>
<ig-currency-editor [(ngModel)]="editors.price"></ig-currency-editor>
</div>
</div>
<div id="client">
<div class="element" style="margin-right: 40px;">
<label for="mail">Contact email</label>
<ig-text-editor widgetId="email" [(ngModel)]="editors.email" [options]="editors.emailEditor"></ig-text-editor>
</div>
<div class="element" style="margin-right: 40px;">
<label for="date">Delivery date</label>
<ig-date-editor [(ngModel)]="editors.date"></ig-date-editor>
</div>
<div class="element">
<label for="amountm3">Amount in cubic meter</label>
<ig-numeric-editor [(ngModel)]="editors.amount" [options]="{buttonType:'clear,spin'}"></ig-numeric-editor>
</div>
</div>
<div id="delivery">
<div class="element mid">
<ig-checkbox-editor [(ngModel)]="editors.freedelivery"></ig-checkbox-editor>
<label for="freeDelivery">Apply free delivery</label>
</div>
<div class="element">
<label for="applyDiscount">Apply discount</label>
<ig-percent-editor [(ngModel)]="editors.discount"></ig-percent-editor>
</div>
</div>
<div id="priceContainer">
<div id="submitPurchase">
<p id="total">Total: : {{this.total}}</p>
<input type="button" id="createOrder" value="Create Purchase Order" style="height: 25px; width: 200px;" (click)="clickHandler()" />
<div id="successMessageDiv">
<p id="successMessage" style="display: inline-block;">{{this.editors.successMessage}}</p>
</div>
</div>
</div>
</div>`
})
export class AppComponent {
public editors: any;
public today: Date;
get total() {
this.editors.total = this.editors.amount * (this.editors.price - this.editors.discount * this.editors.price);
if (!this.editors.freedelivery) {
this.editors.total += 20;
}
return this.editors.total;
}
clickHandler() {
this.editors.successMessage = "Order successfully created!";
}
constructor() {
this.today = new Date();
this.editors = {
client: '',
email: '',
emailEditor: {
placeHolder: 'someone@example.com',
validatorOptions: {
email: true,
onblur: true,
notificationOptions: {
direction: "bottom",
mode: "popover"
}
}
},
address: '',
freedelivery: false,
price: 79,
amount: 1,
discount: 0.06,
date: new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() + 1),
total: 0
};
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, IgCurrencyEditorComponent, IgDateEditorComponent, IgMaskEditorComponent, IgNumericEditorComponent,
IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent, IgCheckboxEditorComponent, IgValidatorComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
<style>
#app {
width: 100%;
min-width: 400px;
}
#app .ui-igedit{
margin: 5px;
}
p.inline
{
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<script type="text/babel">
var App = React.createClass({
getInitialState: function () {
return {
total: "",
price: {
value: "79",
minValue: 0,
currencySymbol: "€"
},
amount: {
value: 10,
minValue: 1
},
discount: {
value: "0.08"
}
}
},
units: "metric",
componentDidMount: function() {
this.calculateTotalPrice();
},
calculateTotalPrice: function() {
var pricePerUnit = this.state.price.value;
var unitsAmount = this.state.amount.value;
pricePerUnit -= pricePerUnit * this.state.discount.value;
var totalPrice = pricePerUnit * unitsAmount;
this.setState({ total: Math.round10(totalPrice, -2) });
},
createNewOrder: function() {
$("#successMessage").text("Order successfully created!");
$("#successMessage").stop(true, true).fadeIn(200).fadeOut(3000);
},
calculateNewPrice: function (oldPrice) {
var newPrice;
if (this.units == "metric") {
newPrice = oldPrice * 0.8;
return newPrice;
}
else {
newPrice = oldPrice * 1.25;
return newPrice;
}
},
calculateNewAmount: function (oldAmount) {
var newAmount;
if (this.units == "metric") {
newAmount = oldAmount * 0.77;
return newAmount;
}
else {
newAmount = oldAmount * 1.30;
return newAmount;
}
},
/* events */
valueChangedHandler: function (ev, ui) {
var state = this.state[ui.owner.id];
state.value = ui.newValue;
this.setState({ state });
this.calculateTotalPrice();
},
deliveryChanged: function (ev, ui) {
var total = this.state.total;
if (ui.newValue) {
total = total - 20;
} else {
total = total + 20;
}
this.setState({ total: total });
},
radioChange: function (e) {
var price = this.state.price,
amount = this.state.amount;
this.units = e.currentTarget.value;
if (this.units == "metric") {
//Change the currency symbol to Euros
price.currencySymbol = "€";
}
else {
//Change the currency symbol to Dollar
price.currencySymbol = "$";
}
//Calculate the price in Euros/Dollars
price.value = this.calculateNewPrice(price.value).toString();
//Update igNumericEditor
//Update the amount in cubic meter/yard
amount.value = this.calculateNewAmount(amount.value);
//Update Total price
this.setState({ price, amount });
this.calculateTotalPrice();
},
render: function () {
return (<div>
<p className="inline">Measurement units</p>
<input type="radio" name="radioMeasurement" value="metric"
onChange={this.radioChange} defaultChecked={true}/>
<label htmlFor="radioM">metric</label>
<input type="radio" name="radioMeasurement" value="imperial"
onChange={this.radioChange} />
<label htmlFor="radioI">imperial</label>
<div>
</div>
<IgTextEditor id="clientName" placeHolder="Company name" />
<IgTextEditor id="clientMail" placeHolder="someone@example.com" />
<IgTextEditor id="deliveryAddress" placeHolder="Street address, P.O. box" />
<IgDateEditor id="deliveryDate" placeHolder="12/30/2015" />
<div>
<IgCheckboxEditor id="freeDelivery"
size="small" valueChanged={this.deliveryChanged}/>
<label>Apply free delivery</label>
</div>
<IgCurrencyEditor id="price"
value={this.state.price.value}
valueChanged={this.valueChangedHandler}
minValue={this.state.price.minValue}
currencySymbol={this.state.price.currencySymbol} />
<IgNumericEditor id="amount" dataMode="int"
value={this.state.amount.value}
minValue={this.state.amount.minValue}
valueChanged={this.valueChangedHandler} />
<IgPercentEditor id="discount"
value={this.state.discount.value} minValue={0}
valueChanged={this.valueChangedHandler} />
<div id="priceContainer">
<div id="submitPurchase">
<p id="total">Total: {this.state.total} </p>
<input type="submit" id="createOrder"
value="Create Purchase Order"onClick={this.createNewOrder} />
<div id="successMessageDiv">
<p id="successMessage"></p>
</div>
</div>
</div>
</div>
)
}
});
ReactDOM.render(
<App />,
document.getElementById("app")
);
</script>
</div>
</body>
</html>