igGrid with igValidator options
by georgianastasov
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<table id="gridUpdating"></table>
JavaScript
$(function () {
// sample data source
var ds = [
{ ProductID: 1, ProdNumber: 1111, Name: "Adjustable Race", ProductNumber: "AR-5381" },
{ ProductID: 2, ProdNumber: 2222, Name: "Bearing Ball", ProductNumber: "BA-8327" },
{ ProductID: 3, ProdNumber: 3333, Name: "BB Ball Bearing", ProductNumber: "BE-2349" },
{ ProductID: 4, ProdNumber: 4444, Name: "Headset Ball Bearings", ProductNumber: "BE-2908" },
{ ProductID: 316, ProdNumber: 5555, Name: "Blade", ProductNumber: "BL-2036" },
{ ProductID: 317, ProdNumber: 6666, Name: "LL Crankarm", ProductNumber: "CA-5965" }
];
// initialize the grid
$("#gridUpdating").igGrid({
width: "100%",
primaryKey: "ProductID",
dataSource: ds,
columns: [
{
headerText: "Product ID",
key: "ProductID",
dataType: "number",
},
{
headerText: "Prod Number",
key: "ProdNumber",
dataType: "string",
},
{
headerText: "Product Name",
key: "Name",
dataType: "string",
},
{
headerText: "Product SKU",
key: "ProductNumber",
dataType: "string",
}
],
features: [
{
name: "Updating",
validation: true,
enableAddRow: true,
enableDeleteRow: true,
editMode: "row",
columnSettings: [
{
columnKey: "ProductID",
editorType: "numeric",
editorOptions: {
disabled: true
}
},
{
columnKey: "ProdNumber",
editorType: "text",
validation: true,
editorOptions: {
validatorOptions: {
onblur: true,
onchange: true,
onsubmit: true,
// 1) Required field
required: {
errorMessage: "Product number is required"
...