Available in the OSS Version
Combo Box - Editing
This samples demonstrates how to set up the combo with various editing options.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This samples demonstrates how to set up the combo with various editing options.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<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" />
<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>
<!-- Ignite UI for jQuery Sample Data -->
<script src="/data-files/credit-cards.js"></script>
<style>
.payment-form {
width:100%;overflow:hidden;
}
#paymentType {
float:left;
}
#payment-label {
line-height:32px;
margin-left:210px;
}
.card-form {
width: 350px;
border: 2px solid #0094ff;
border-radius: 15px;
padding: 25px 15px 0px 15px;
}
.card-logo {
margin-left: 9px;
}
.ui-igcombo-wrapper,
.ui-igedit {
margin-bottom: 25px;
}
#creditCardNumber .ui-igcombo-button { display: none; }
.good-through {
float: left;
margin-right: 5px;
}
#buy {
margin-top: 10px;
margin-left: 260px;
}
</style>
</head>
<body>
<div class="payment-form">
<div id="paymentType" name="paymentType"></div>
<div id="payment-label"><label id="paymentTypeLabel" for="paymentType">This seller accepts credit card only</label></div>
</div>
<div class="card-form">
<div id="creditCardType"></div><img src="/images/samples/credit-cards/visa_logo_large.gif" id="cardLogo" class="card-logo" alt="Visa" />
<div id="creditCardNumber"></div>
<div class="good-through ui-state-disabled">
<label>GOOD<br />THRU</label>
</div>
<div id="month" name="month"></div>
<div id="year"></div>
<input id="ccv" />
</div>
<input type="button" value="Buy" id="buy" />
<script>
$(function () {
var selectedCardType = "Visa";
$("#paymentType").igCombo({
textKey: "Text",
valueKey: "Text",
dataSource: paymentTypes,
mode: "readonlylist"
}).attr("title", "This combo is in readonlylist mode. It shows the drop down, but is not editable and items are not selectable.").igPopover({
direction: "top",
headerTemplate: {
closeButton: true
},
closeOnBlur: true,
animationDuration: 150,
maxHeight: null,
maxWidth: 170,
showOn: "focus"
});
$("#creditCardType").igCombo({
width: "240px",
textKey: "Text",
valueKey: "Text",
dataSource: creditCardTypes,
mode: "dropdown",
enableClearButton: false,
selectionChanged: function (event, ui) {
selectedCardType = ui.items[0].data.Text;
$("#cardLogo").attr({
"src": ui.items[0].data.Image,
"alt": selectedCardType
});
$("#creditCardNumber").igCombo("option", "dataSource", creditCards[selectedCardType]);
if (selectedCardType === "American Express") {
$("#ccv").igNumericEditor("option", "maxValue", 9999);
} else {
$("#ccv").igNumericEditor("option", "maxValue", 999);
$("#ccv").igNumericEditor("value", null);
}
}
}).attr("title", "This combo is in dropdown mode. Only items from the list can be selected.").igPopover({
direction: "top",
headerTemplate: {
closeButton: true
},
closeOnBlur: true,
animationDuration: 150,
maxHeight: null,
maxWidth: 170,
showOn: "focus"
});
function transformCustomValue(value) {
var newValue = {
CardNumber: "",
DisplayNumber: "",
Image: creditCardLogos[selectedCardType]
};
value = value.replace(/-/g, "");
value = value.split("");
for (var i = 0; i < (selectedCardType === "American Express" ? 3 : 4); i++) {
newValue.CardNumber += value.splice(0, 1);
newValue.DisplayNumber += "*";
}
var length = value.length;
for (var i = 0; i < length; i++) {
var char = value.splice(0, 1);
if (i % 4 === 0) {
newValue.CardNumber += "-";
newValue.DisplayNumber += "-";
}
newValue.CardNumber += char;
newValue.DisplayNumber += i > 7 ? char : "*";
}
return newValue;
};
$("#creditCardNumber").igCombo({
width: "100%",
textKey: "DisplayNumber",
valueKey: "CardNumber",
dataSource: creditCards[selectedCardType],
dropDownOnFocus: true,
filteringType: "none",
placeHolder: "Enter credit card number, or choose from previously used...",
itemTemplate: "${DisplayNumber}<img src='${Image}' class='card-logo' />",
allowCustomValue: true,
validatorOptions: {
custom: function (value) {
var validator = $("#creditCardNumber").igCombo("validator"),
re = selectedCardType === "American Express" ? /^[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/ : /^[0-9]{4}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/,
isValid = true;
if (value.length) {
value = value[0];
if (!$("#creditCardNumber").igCombo("selectedItems")) {
// custom value is selected
if (!re.test(value)) {
isValid = false;
}
if (isValid) {
var newValue = transformCustomValue(value),
index = creditCards[selectedCardType].length,
current;
if (current = $("#creditCardNumber").igCombo("itemsFromValue", newValue)) {
$("#creditCardNumber").igCombo("select", current.element)
} else {
creditCards[selectedCardType].push(newValue);
$("#creditCardNumber").igCombo("dataBind");
$("#creditCardNumber").igCombo("index", index);
}
}
}
$("#month").igCombo("option", "disabled", false);
$("#year").igCombo("option", "disabled", false);
$("#ccv").igNumericEditor("option", "disabled", false);
$("div.good-through").removeClass("ui-state-disabled");
return isValid;
}
$("#month").igCombo("option", "disabled", true);
$("#year").igCombo("option", "disabled", true);
$("#ccv").igNumericEditor("option", "disabled", true);
$("div.good-through").addClass("ui-state-disabled");
return false;
},
errorMessage: "Invalid credit card number!",
onchange: true,
onblur: true
}
}).attr("title", "This combo allows custom value input. Users can type in values that are not available in the list.").igPopover({
direction: "right",
position: "start",
headerTemplate: {
closeButton: true
},
closeOnBlur: true,
animationDuration: 150,
maxHeight: null,
maxWidth: 170,
showOn: "focus"
});
$("#month").igCombo({
width: "100px",
textKey: "Text",
valueKey: "Value",
dataSource: months,
disabled: true,
mode: "dropdown"
});
$("#year").igCombo({
width: "100px",
textKey: "Text",
valueKey: "Text",
dataSource: years,
disabled: true,
mode: "dropdown"
});
$("#ccv").igNumericEditor({
width: "100px",
placeHolder: "CCV",
disabled: true
});
$("#buy").igButton({
labelText: $("#buy").val(),
centerLabel: true,
width: 120
});
});
</script>
</body>
</html>
var paymentTypes = [
{ Text: "Credit Card Payment" },
{ Text: "Direct Debit" },
{ Text: "PayPal" }
];
var creditCardTypes = [
{ Text: "Visa", Image: "../../images/samples/credit-cards/visa_logo_large.gif" },
{ Text: "MasterCard", Image: "../../images/samples/credit-cards/mastercard_logo_large.gif" },
{ Text: "American Express", Image: "../../images/samples/credit-cards/american_express_logo_large.gif" }
];
var creditCards = {
"Visa": [
{ CardNumber: "1234-5678-9012-3456", DisplayNumber: "****-****-****-3456", Image: "../../images/samples/credit-cards/visa_logo_small.gif" },
{ CardNumber: "0987-6543-2109-8765", DisplayNumber: "****-****-****-8765", Image: "../../images/samples/credit-cards/visa_logo_small.gif" }
],
"MasterCard": [
{ CardNumber: "2345-6789-0123-4567", DisplayNumber: "****-****-****-4567", Image: "../../images/samples/credit-cards/mastercard_logo_small.gif" }
],
"American Express": [
{ CardNumber: "456-7890-1234-5678", DisplayNumber: "***-****-****-5678", Image: "../../images/samples/credit-cards/american_express_logo_small.gif" }
]
};
var creditCardLogos = {
"Visa": "../../images/samples/credit-cards/visa_logo_small.gif",
"MasterCard": "../../images/samples/credit-cards/mastercard_logo_small.gif",
"American Express": "../../images/samples/credit-cards/american_express_logo_small.gif"
};
var months = [
{ Text: "01", Value: 1 },
{ Text: "02", Value: 2 },
{ Text: "03", Value: 3 },
{ Text: "04", Value: 4 },
{ Text: "05", Value: 5 },
{ Text: "06", Value: 6 },
{ Text: "07", Value: 7 },
{ Text: "08", Value: 8 },
{ Text: "09", Value: 9 },
{ Text: "10", Value: 10 },
{ Text: "11", Value: 11 },
{ Text: "12", Value: 12 }
];
var years = [
{ Text: 15 },
{ Text: 16 },
{ Text: 17 },
{ Text: 18 },
{ Text: 19 },
{ Text: 20 },
{ Text: 21 }
];