igGrid custom validation non space chatacters
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/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></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>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css">
</link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="gridWrapper" style="position:relative">
<table id="grid"></table>
</div>
JavaScript
$(function () {
// Sample records to populate the grid
var records = [
{ EmployeeID: 1, FirstName: "Nancy", LastName: "Davolio", Title: "Sales Representative" },
{ EmployeeID: 2, FirstName: "Andrew", LastName: "Fuller", Title: "Vice President, Sales" },
{ EmployeeID: 3, FirstName: "Janet", LastName: "Leverling", Title: "Sales Representative" },
{ EmployeeID: 4, FirstName: "Margaret", LastName: "Peacock", Title: "Sales Representative" },
{ EmployeeID: 5, FirstName: "Steven", LastName: "Buchanan", Title: "Sales Manager" },
];
$("#grid").igGrid({
virtualization: false,
autoGenerateColumns: false,
renderCheckboxes: true,
primaryKey: "EmployeeID",
columns: [
{
headerText: "Employee ID", key: "EmployeeID", dataType: "number", width: "100px"
},
{
headerText: "First Name", key: "FirstName", dataType: "string", width: "150px"
},
{
headerText: "Last Name", key: "LastName", dataType: "string", width: "150px"
},
{
headerText: "Title", key: "Title", dataType: "string", width: "150px"
},
],
dataSource: records,
height: "400px",
width: "100%",
// Grid features
features: [
{
name: "Updating",
enableAddRow: true,
editMode: "cell",
enableDeleteRow: true,
rowEditDialogContainment: "owner",
showReadonlyEditors: false,
enableDataDirtyException: false,
// Column-specific editing settings
columnSettings: [
{
columnKey: "EmployeeID",
readOnly: true
},
{
...