rowdata is undefined

[mr_putersmitParticipant]

I am getting the above error and cannot see where to correct it? When I press the ‘delete’ button it comes up in firebug 1.9 as ‘rowdata is undefined’. Also, the ‘add’ button does appear. Where am I going wrong with my code. Thanks

 

$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’},
{ name: ‘type’},
{ name: ‘service’},
{ name: ‘quantity’},
{ name: ‘department’},
{ name: ‘date’, type: ‘date’, format: ‘yyyy-MM-dd HH:mm:ss’},
],
url: ‘data.php’,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
var data = “update=true&type=” + rowdata.type + “&service=” + rowdata.service + “&quantity=” + rowdata.quantity;
data = data + “&department=” + rowdata.department + “&date=” + rowdata.date;
data = data + “&id=” + rowdata.id;

$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
//alert(rowdata);
}
});
},
deleterow: function (rowid, rowdata) {
// synchronize with the server – send update command
var data = “delete=true&type=” + rowdata.type + “&service=” + rowdata.service + “&quantity=” + rowdata.quantity;
data = data + “&department=” + rowdata.department + “&date=” + rowdata.date;
data = data + “&id=” + rowdata.id;

$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
//alert(rowid);
console.log(rowid);
}
});
}
};

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

$(“#jqxgrid”).jqxGrid(
{
source: source,
theme: ‘classic’,
width: 900,
altrows: true,
pageable: true,
sortable: true,
filterable: true,
autoheight: true,
pagesizeoptions: [’10’, ’20’, ’30’, ’40’],
editable: true,
ready: function () {
var button = $(“<input type=’button’ value=’Add’ id=’myButton’/>”);
button.jqxButton({ height: 20 });
button.click(function () {
$(“#jqxgrid”).jqxGrid(‘addrow’, null, []);

});
$(“.jqx-grid-pager > div:first”).append(button);

},
ready: function () {
//var value = $(‘#jqxrid’).jqxGrid(‘deleterow’, rowid);
var delbutton = $(“<input type=’button’ value=’Delete’ id=’DelButton’/>”);
delbutton.jqxButton({ height: 20 });
delbutton.click(function () {
$(‘#jqxgrid’).jqxGrid(‘deleterow’, id);

});
$(“.jqx-grid-pager > div:first”).append(delbutton);
},
columns: [
{ text: ‘id’, editable: false, datafield: ‘id’, width: 100 },
{ text: ‘Type’, datafield: ‘type’, width: 150},
{ text: ‘Service’, datafield: ‘service’, width: 150 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 180 },
{ text: ‘Department’, datafield: ‘department’, width: 90 },
{ text: ‘Date’, datafield: ‘date’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yyyy HH:mm:ss’, width: 230, showCalendarButton: false }
]
});
});

$(document).ready(function () {
var theme = ‘classic’;
// Create a jqxDateTimeInput
$(“#jqxWidget”).jqxDateTimeInput({ width: ‘250px’, height: ’25px’, theme: theme, formatString: ‘dd/MM/yyyy HH:mm:ss’ });
});

[Peter StoevKeymaster]

Hi mr_putersmit,

I suggest you to take a look at this sample as it illustrates how to implement CRUD with jqxGrid: createremoveupdatedata.htm.

For formatting of your code, take a look at this post: http://www.jqwidgets.com/community/topic/code-formatting/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mr_putersmitParticipant]

Thank you Peter. What this doesn’t make clear at least to me is, where, rowdata and row id are generated. What I am trying to do is add a new blank row and then enter details using editable option. When I tried to use code you helped me with when I need assistance for ‘adding new blank row’, it just displays blank grid.

Also, this line: var data = “insert=true&” + $.param(rowid); in the addrow function. This gives me 4 digits for id when there are only 2 digits in db? How do I correct that. Thanks

[Peter StoevKeymaster]

Hi mr_putersmit,

The second parameter in the ‘addrow’ method call is the row’s id. If you don’t pass one, the Grid will generate a random ID.

$(“#jqxgrid”).jqxGrid(‘addrow’, null, []);

When you add a row with the ‘addrow’ method, you pass the row’s id and the rowdata as parameters. rowdata is generate by the developer i.e by you. In your scenario you are passing an empty array.

‘deleterow’ function deletes a row with specific id. It calls the source object’s deleterow passing only the row’s id – the one you passed in the addrow method or that was generated by the Grid, if you didn’t pass any id. In your code, the deleterow has 2 params which is incorrect because the Grid calls that function with 1 param only.

When you edit cells, the Grid calls the ‘updaterow’ function with the edited row’s id and the rowdata.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mr_putersmitParticipant]

Hi Peter

In your code, the deleterow has 2 params which is incorrect because the Grid calls that function with 1 param only.

rowdata is generate by the developer i.e by you. In your scenario you are passing an empty array.
$(“#jqxgrid”).jqxGrid(‘addrow’, null, []);

can you give examples please. Thanks

[Peter StoevKeymaster]

I already gave you an example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?classic. See the implementation of the ‘addrow’, ‘updaterow’ and ‘deleterow’ functions in the source object. The ‘deleterow’ has only 1 param.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mr_putersmitParticipant]

Hi Peter

The second parameter in the ‘addrow’ method call is the row’s id. If you don’t pass one, the Grid will generate a random ID.

How do I get the id back from db and not xml? The example you give uses’ xml. Thanks

[Author]

Posts