.
$(document).ready(function () {
var theme = ”;
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 90 },
{ text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 177},
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67 },
{ text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 90, cellsalign: ‘right’, cellsformat: ‘d’,
validation: function (cell, value) {
var year = value.getFullYear();
if (year >= 2013) {
return { result: false, message: “Ship Date should be before 1/1/2013” };
}
return true;
}
},
{ text: ‘Quantity’, datafield: ‘quantity’, width: 70, cellsalign: ‘right’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value 150) {
return { result: false, message: “Quantity should be in the 0-150 interval” };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
}
},
{ text: ‘Price’, datafield: ‘price’, width: 65, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value 15) {
return { result: false, message: “Price should be in the 0-15 interval” };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}
}
]
});
// events
$(“#jqxgrid”).bind(‘cellbeginedit’, function (event) {
var args = event.args;
$(“#cellbegineditevent”).html(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
$(“#jqxgrid”).bind(‘cellendedit’, function (event) {
var args = event.args;
$(“#cellendeditevent”).html(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
});
function MapButtonClick() {
var data = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, 0);
var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’);
console.log(data);
console.log(rows[0].productname);
alert(rows[0].productname);
}