Data missing after adding code

[rondcMember]

I am using your example for Building CRUD Web App with jqxGrid. Everything seem to work fine up to the point when I add the code for the button click events. Once I add this code, then run the script nothing is displayed. But if I remove this code the data shows in the grid just fine. Here’s my code:

$(document).ready(function () {
// prepare the data
var theme = ‘classic’;

var source =
{
datatype: “json”,
datafields: [
{ name: ‘ID’},
{ name: ‘Student Name’},
{ name: ‘ACT-SAT’},
{ name: ‘GPA’},
{ name: ‘TRANSFER GPA’},
{ name: ‘BIOL100’},
{ name: ‘MATH101-111’},
{ name: ‘HPED’},
{ name: ‘UNST110’},
{ name: ‘NURS100’},
{ name: ‘UNST120’},
{ name: ‘UNST130’},
{ name: ‘CHEM104’},
{ name: ‘UNST140’},
{ name: ‘CHEM114’},
{ name: ‘FCS310’},
{ name: ‘STATISTICS’},
{ name: ‘BIOL220’},
{ name: ‘BIOL361’},
{ name: ‘PSYC320’},
{ name: ‘UNST Elective 1’},
{ name: ‘UNST Elective 2’},
{ name: ‘NURS300’},
{ name: ‘NURS310’},
{ name: ‘NURS320’},
{ name: ‘NURS350’},
{ name: ‘NURS351’},
{ name: ‘FCS337’},
{ name: ‘NURS414’},
{ name: ‘NURS400’},
{ name: ‘PSYC434’},
{ name: ‘NURS405’},
{ name: ‘UNST CLUSTER 1’},
{ name: ‘UNST CLUSTER 2’},
{ name: ‘NURS412’},
{ name: ‘NURS416’},
{ name: ‘NURS418’},
{ name: ‘NURS500’},
{ name: ‘NURS510’},
{ name: ‘NURS513’},
{ name: ‘NURS514’},
{ name: ‘NURS518’},
{ name: ‘NURS520’},
{ name: ‘NURS524’},
],
id: ‘ID’,
url: ‘data.php’,
addrow: function (rowid, rowdata) {
// synchronize with the server – send insert command
var data = “insert=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// insert command is executed.
}
});
},
deleterow: function (rowid) {
// synchronize with the server – send delete command
var data = “delete=true&ID=” + rowid;
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// delete command is executed.
}
});
},
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
var data = “update=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
}
});
},
root: ‘Rows’,
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;
}
};

var dataadapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 2200,
source: dataadapter,
theme: theme,
autoheight: true,
pageable: true,
pagesize: 25,
virtualmode: true,
editable: true,
selectionmode: ‘singlerow’,
rendergridrows: function()
{
return dataadapter.records;
},
columns: [
{ text: ‘Student Name’, datafield: ‘Student Name’, width: 250 },
{ text: ‘ACT-SAT’, datafield: ‘ACT-SAT’, width: 50 },
{ text: ‘GPA’, datafield: ‘GPA’, width: 50 },
{ text: ‘TRANSFER GPA’, datafield: ‘TRANSFER GPA’, width: 110 },
{ text: ‘BIOL100’, datafield: ‘BIOL100’, width: 62 },
{ text: ‘MATH101-111’, datafield: ‘MATH101-111’, width: 100 },
{ text: ‘HPED’, datafield: ‘HPED’, width: 75 },
{ text: ‘UNST110’, datafield: ‘UNST110’, width: 65 },
{ text: ‘NURS100’, datafield: ‘NURS100’, width: 65 },
{ text: ‘UNST120’, datafield: ‘UNST120’, width: 65 },
{ text: ‘UNST130’, datafield: ‘UNST130’, width: 65 },
{ text: ‘CHEM104’, datafield: ‘CHEM104’, width: 65 },
{ text: ‘UNST140’, datafield: ‘UNST140’, width: 65 },
{ text: ‘CHEM114’, datafield: ‘CHEM114’, width: 65 },
{ text: ‘FCS310’, datafield: ‘FCS310’, width: 65 },
{ text: ‘STATISTICS’, datafield: ‘STATISTICS’, width: 100 },
{ text: ‘BIOL220’, datafield: ‘BIOL220’, width: 65 },
{ text: ‘BIOL361’, datafield: ‘BIOL361’, width: 65 },
{ text: ‘PSYC320’, datafield: ‘PSYC320’, width: 65 },
{ text: ‘UNST Elective 1’, datafield: ‘UNST Elective 1’, width: 100 },
{ text: ‘UNST Elective 2’, datafield: ‘UNST Elective 2’, width: 100 },
{ text: ‘NURS300’, datafield: ‘NURS300’, width: 65 },
{ text: ‘NURS310’, datafield: ‘NURS310’, width: 65 },
{ text: ‘NURS320’, datafield: ‘NURS320’, width: 65 },
{ text: ‘NURS350’, datafield: ‘NURS350’, width: 65 },
{ text: ‘NURS351’, datafield: ‘NURS351’, width: 65 },
{ text: ‘FCS337’, datafield: ‘FCS337’, width: 65 },
{ text: ‘NURS414’, datafield: ‘NURS414’, width: 65 },
{ text: ‘NURS400’, datafield: ‘NURS400’, width: 65 },
{ text: ‘PSYC434’, datafield: ‘PSYC434’, width: 65 },
{ text: ‘NURS405’, datafield: ‘NURS405’, width: 65 },
{ text: ‘UNST CLUSTER 1’, datafield: ‘UNST CLUSTER 1’, width: 100 },
{ text: ‘UNST CLUSTER 2’, datafield: ‘UNST CLUSTER 2’, width: 100 },
{ text: ‘NURS412’, datafield: ‘NURS412’, width: 65 },
{ text: ‘NURS416’, datafield: ‘NURS416’, width: 65 },
{ text: ‘NURS418’, datafield: ‘NURS418’, width: 65 },
{ text: ‘NURS500’, datafield: ‘NURS500’, width: 65 },
{ text: ‘NURS510’, datafield: ‘NURS510’, width: 65 },
{ text: ‘NURS513’, datafield: ‘NURS513’, width: 65 },
{ text: ‘NURS514’, datafield: ‘NURS514’, width: 65 },
{ text: ‘NURS518’, datafield: ‘NURS518’, width: 65 },
{ text: ‘NURS520’, datafield: ‘NURS520’, width: 65 },
{ text: ‘NURS524’, datafield: ‘NURS524’, width: 65 }
]
});
//
// trying to add click event code here.
});

Thanks. Any thoughts.

[Peter StoevKeymaster]

Hi rondc,

1. Could you paste the full script + html code here? You can format the code by using the “Format HTML Code” button which is situated before the Red Text color button. In addition, all examples of the Grid are also included in the installation package with the full source code. You can find them in the ‘php_demos’ folder.

2. There’s also a ‘,’ which is not necessary after the:

{ name: ‘NURS524’},

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts