I am a new user and can not get validation to work. Below is a sample program. Could you identify what I am missing?
<!--jQuery dependencies-->
<html>
<head>
<meta charset="utf-8">
<!--jQuery dependencies-->
<link rel="stylesheet" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="pqgrid.min.js"></script>
<!--jqueryui touch punch for touch devices-->
<script src="touch-punch/touch-punch.min.js"></script>
<!--PQ Grid Office theme-->
<link rel="stylesheet" href="themes/office/pqgrid.css" />
</head>
<body>
<h2>Selecting the Best Year Worksheet</h2>
<div id="grid_custom_editing"></div>
<script>
$(function(){
var arrayData = [
{year: '2009', ab: 500, hits: 100, hr: 20, so: 50, bb: 50, avg: ".200"},
{year: '2010', ab: 500, hits: 100, hr: 20, so: 50, bb: 50, avg: ".205"},
{year: '2011', ab: 500, hits: 100, hr: 20, so: 50, bb: 50, avg: ".220"},
{year: '2012', ab: 575, hits: 127, hr: 20, so: 50, bb: 55, avg: ".231"},
{year: '2013', ab: 575, hits: 127, hr: 20, so: 50, bb: 55, avg: ".240"}
];
var obj = {
title: "Players Name",
width: 743,
height: 222,
width: "auto",
dataModel: {
data:arrayData,
location: "local"
},
scrollModel: { horizontal: false },
bottomVisible: true,
numberCell: false,
columnBorders: true,
selectionModel: { type: 'cell' },
hoverMode: 'cell',
scrollModel: { autoFit: true },
highlightText: { on: true },
collapsible: false,
track: true,
editor: { type: 'textbox', select: true, style: 'outline:none;' },
validation: { icon: 'ui-icon-info' },
editModel: {
saveKey: $.ui.keyCode.ENTER,
keyUpDown: true,
cellBorderWidth: 0,
onBlur: 'validate'
},
colModel: [
{title:"Year", width:60, dataType:"string", align:"center", editable: false, resizable: false, sortable:false, dataIndx: "year"},
{title:"AB", width:60, dataType:"integer", align:"center", editable: false, resizable: false, sortable:false, dataIndx: "ab"},
{title:"Hits", width:60, dataType:"integer", align:"center", editable: false, resizable: false, sortable:false, dataIndx: "hits" },
{title:"HR", width:60, dataType:"integer", align:"center", editable: false, resizable: false, sortable:false, dataIndx: "hr"},
{title:"BB", width:60, dataType:"integer", align:"center", editable: false, resizable: false, sortable:false, dataIndx: "bb"},
{title:"SO", width:60, dataType:"integer", align:"center", editable: false, resizable: false, sortable:false, dataIndx: "so"},
{title:"AVG.", width:60, dataType: "float", align:"center",resizable: false, sortable:false, dataIndx: "avg",
validations: [ { type: 'gt', value: 1, msg: "Error" }] }
]
};
var $grid = $("#grid_custom_editing").pqGrid(obj);
//Do validations in cellBeforeSave event
grid.on("pqgridcellbeforesave", function (evt, ui) {
var isValid = grid.pqGrid("isValid", ui).valid;
if (!isValid) {
grid.find(".pq-editor-focus").css({ "border-color": "red" });
return false;
}
});
});
</script>
</body>
</html>
