Hi,
jqxGrid fully supports dynamic cell validation using the cellvaluechanging or cellbeginedit/cellendedit events. You can prevent invalid input (like non-numbers, out-of-range values, etc.) and provide instant feedback.
Here’s a complete guide for jQuery:
1. Basic Numeric Validation Example
// Define the data source
var data = [
{ id: 1, product: “Apple”, quantity: 10 },
{ id: 2, product: “Orange”, quantity: 5 }
];
var source = {
localdata: data,
datatype: “array”,
datafields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘product’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ }
],
id: ‘id’
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#grid”).jqxGrid({
width: 500,
source: dataAdapter,
editable: true,
columns: [
{ text: ‘Product’, datafield: ‘product’, width: 200 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 100, columntype: ‘numberinput’ }
]
});
2. Add Dynamic Validation Using cellvaluechanging
The cellvaluechanging event is triggered before the new value is applied, so you can block invalid input.
$(‘#grid’).on(‘cellvaluechanging’, function (event) {
var args = event.args;
var newValue = args.newvalue;
var rowData = args.row; // full row data
var datafield = args.datafield;
if (datafield === ‘quantity’) {
if (isNaN(newValue) || newValue < 0 || newValue > 100) {
alert(“Quantity must be a number between 0 and 100!”);
args.newvalue = args.oldvalue; // revert to old value
}
}
});
Regards,
Peter
