Server Side Grid Crud example with popup edit

[lkaatz99Participant]

I modified the Server Side Grid CRUD example to include the edit popup window from the jqxGrid PopupEditing example. Reason I did this was to see if the popup would update the grid row after clicking save. It did not. This should work. The problem I see is with the EmployeeID. In the source object declaration, the id: ‘EmployeeID’. remove that and it will work. But if you want to delete a row, you need the rowid setting. What is wrong with this example?

$(document).ready(function () {
// prepare the data
var data = {};
var theme = ‘classic’;
var firstNames = [“Nancy”, “Andrew”, “Janet”, “Margaret”, “Steven”, “Michael”, “Robert”, “Laura”, “Anne”];
var lastNames = [“Davolio”, “Fuller”, “Leverling”, “Peacock”, “Buchanan”, “Suyama”, “King”, “Callahan”, “Dodsworth”];
var titles = [“Sales Representative”, “Vice President, Sales”, “Sales Representative”, “Sales Representative”, “Sales Manager”, “Sales Representative”, “Sales Representative”, “Inside Sales Coordinator”, “Sales Representative”];
var address = [“507 – 20th Ave. E. Apt. 2A”, “908 W. Capital Way”, “722 Moss Bay Blvd.”, “4110 Old Redmond Rd.”, “14 Garrett Hill”, “Coventry House”, “Miner Rd.”, “Edgeham Hollow”, “Winchester Way”, “4726 – 11th Ave. N.E.”, “7 Houndstooth Rd.”];
var city = [“Seattle”, “Tacoma”, “Kirkland”, “Redmond”, “London”, “London”, “London”, “Seattle”, “London”];
var country = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];

var generaterow = function (id) {
var row = {};
var firtnameindex = Math.floor(Math.random() * firstNames.length);
var lastnameindex = Math.floor(Math.random() * lastNames.length);
var k = firtnameindex;

row[“EmployeeID”] = id;
row[“FirstName”] = firstNames[firtnameindex];
row[“LastName”] = lastNames[lastnameindex];
row[“Title”] = titles[k];
row[“Address”] = address[k];
row[“City”] = city[k];
row[“Country”] = country[k];
row[“Notes”] = row[“FirstName”] + ‘ received a BA in computer science from the University of Washington’;

return row;
}

var source =
{
datatype: “json”,
cache: false,
datafields: [
{ name: ‘EmployeeID’},
{ name: ‘FirstName’},
{ name: ‘LastName’},
{ name: ‘Title’},
{ name: ‘Address’},
{ name: ‘City’},
{ name: ‘Country’},
{ name: ‘Notes’}
],
id: ‘EmployeeID’,
url: ‘data.php’,
cache: false,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
var data = “insert=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
cache: false,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
var data = “delete=true&” + $.param({EmployeeID: rowid});
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
commit(false);
}
});
}
};

// initialize the input fields.
$(“#FirstName”).addClass(‘jqx-input’);
$(“#LastName”).addClass(‘jqx-input’);
$(“#Title”).addClass(‘jqx-input’);
$(“#FirstName”).addClass(‘jqx-rc-all’);
$(“#LastName”).addClass(‘jqx-rc-all’);
$(“#Title”).addClass(‘jqx-rc-all’);

$(“#FirstName”).width(150);
$(“#FirstName”).height(23);
$(“#LastName”).width(150);
$(“#LastName”).height(23);
$(“#Title”).width(150);
$(“#Title”).height(23);

if (theme.length > 0) {
$(“#FirstName”).addClass(‘jqx-input-‘ + theme);
$(“#LastName”).addClass(‘jqx-input-‘ + theme);
$(“#Title”).addClass(‘jqx-input-‘ + theme);
$(“#FirstName”).addClass(‘jqx-rc-all-‘ + theme);
$(“#LastName”).addClass(‘jqx-rc-all-‘ + theme);
$(“#Title”).addClass(‘jqx-rc-all-‘ + theme);
}

var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 960,
height: 350,
source: dataAdapter,
theme: theme,
columns: [
{ text: ‘EmployeeID’, datafield: ‘EmployeeID’, width: 100 },
{ text: ‘First Name’, datafield: ‘FirstName’, width: 100 },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 100 },
{ text: ‘Title’, datafield: ‘Title’, width: 180 },
{ text: ‘Address’, datafield: ‘Address’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 100 },
{ text: ‘Country’, datafield: ‘Country’, width: 140 },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#EmployeeID”).val(dataRecord.EmployeeID);
$(“#FirstName”).val(dataRecord.FirstName);
$(“#LastName”).val(dataRecord.LastName);
$(“#Title”).val(dataRecord.Title);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
},
]
});

$(“#addrowbutton”).jqxButton({ theme: theme });
$(“#deleterowbutton”).jqxButton({ theme: theme });
$(“#updaterowbutton”).jqxButton({ theme: theme });

// update row.
$(“#updaterowbutton”).bind(‘click’, function () {
var datarow = generaterow();
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex = 0) {
var row = { EmployeeID: $(“#EmployeeID”).val(),
FirstName: $(“#FirstName”).val(),
LastName: $(“#FastName”).val(),
Title: $(“#Title”).val()
};
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
});

Edit

First Name:

Last Name:

Product:

[Peter StoevKeymaster]

Hi lkaatz99,

At present we do not have a CRUD example with Popup Edit. We will consider adding such sample in a future version. If you add the Add Row, Delete Row and Update Row buttons from our sample in a Popup, it will work.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[lkaatz99Participant]

Peter,

If you run the example I posted, you will see that the popup edit will not update the row. It shows that something is wrong with the control. I believe it has something to do with the source object – ID key\value pair assignment. If this pair assignment is set, the updaterow does not work.

Larry

[lkaatz99Participant]

Peter,

Do you consider this a problem?

Larry

[Peter StoevKeymaster]

Hi Larry,

This is not a problem with the widget according to us, but a problem with the client-side code or server-side code. We will consider implementing such example in the future, but at present we do not have. You should also take into account that updaterow, deleterow and addrow work with Row ID, not with Row Index as in the posted code. To get the ID of a row, you should use the “getrowid” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts