Grid – rowdata is null

[KeshavanParticipant]

Hi,

Rowdata for the newly to be inserted row shows ‘null’ values in grid upon entering all column values for row,

rowscount value is 1 , what’s the issue, i am new to jquery, I have given the ‘update’ and ‘add’ button code with
alert message values, i have the full code further down below, please help identify where the issue,

// update row.

$(“#updaterowbutton”).bind(‘click’, function () {
/* var datarow s generaterow(); */
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
alert(“Rowscount count (before)” + rowscount);
if (selectedrowindex >= 0 && selectedrowindex < = rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
var datarow = $('#grid').jqxGrid('getrowdata', id);
alert("Selected row index is " + id); /* 1 */
alert("Datarow value is " + datarow); /* null */
alert("ROWSCOUNT is " + rowscount); /* 1 */
$("#jqxgrid").jqxGrid('updaterow', id, datarow);
}
});

// create new row.

$("#addrowbutton").bind('click', function () {
var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
var rowscount = datainformation.rowscount;
editrow = rowscount + 1;
var datarow = generaterow(rowscount + 1);
$("#jqxgrid").jqxGrid('addrow', rowscount + 1, generaterow(), 'top');
alert("datarow value (add mode) " + datarow); /* null */
alert("rowscount value (add mode) " + rowscount); /* 1 */

});

Thanks,

Keshavan

Full code
———–

This example shows CRUD with Db

$(document).ready(function () {

// prepare data from external Company entity

var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’ },
{ name: ‘CompanyName’ }
],
id: ‘CompanyId’,
url: ‘Company/GetPartCompanies’,
async: false
}
var dataAdapater1 = new $.jqx.dataAdapter(source1, { autoBind: true });

// prepare data from external Department entity

var source2 =
{
datatype: “json”,
datafields:
[
{ name: ‘DepartmentId’ },
{ name: ‘DepartmentName’ }
],
id: ‘DepartmentId’,
url: ‘Department/GetPartDepartments’,
async: false
}
var dataAdapater2 = new $.jqx.dataAdapter(source2, { autoBind: true });
var data = {};
var generaterow = function (id) {
var row = {};
row[“EmployeeId”] = id;
row[“CompanyId”] = 1;
row[“DepartmentId”] = 1;
row[“EmployeeCode”] = ” “;
row[“EmployeeName”] = ” “;
row[“MobileNo”] = ” “;
row[“EmailId”] = ” “;
row[“Active”] = 1;
return row;
}

// source for main grid

var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘EmployeeId’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values: { source: dataAdapater1.records,
value: ‘CompanyId’, name: ‘CompanyName’
}
},
{ name: ‘CompanyName’ },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values: { source: dataAdapater2.records,
value: ‘DepartmentId’, name: ‘DepartmentName’
}
},
{ name: ‘DepartmentName’ },
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘EmployeeId’,
url: ‘Employee/GetEmployees’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
alert(“rowdata value in addrow ” + rowdata); /* null */
$.ajax
({
cache: false,
dataType: ‘json’,
url: ‘Employee/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘Employee/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘/Employee/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
}
}
var dataAdapater3 = new $.jqx.dataAdapter(source3);
$(“#jqxgrid”).jqxGrid(
{
width: 950,
height: 350,
source: dataAdapater3,
theme: ‘ui-smoothness’,
editable: true,
editmode: ‘selectedcell’,
rowdetails: true,
rowsheight: 20,
sortable: true,
pageable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
altrows: true,
columns:
[
{ text: ‘Company’, datafield: ‘CompanyId’, columntype: ‘dropdownlist’,
displayfield: ‘CompanyName’, datafield: ‘CompanyId’, width: 150,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList
({ source: dataAdapater1, displayMember: ‘CompanyName’,
valueMember: ‘CompanyId’
});

}
},
{ text: ‘Department’, datafield: ‘DepartmentId’, columntype: ‘dropdownlist’,
displayfield: ‘DepartmentName’, datafield: ‘DepartmentId’, width: 150,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList
({ source: dataAdapater2, displayMember: ‘DepartmentName’,
valueMember: ‘DepartmentId’
});
}
},
{ text: ‘Code’, datafield: ‘EmployeeCode’, width: 60 },
{ text: ‘Name’, datafield: ‘EmployeeName’, width: 170 },
{ text: ‘Mobile No’, datafield: ‘MobileNo’, width: 110 },
{ text: ‘Email’, datafield: ‘EmailId’, width: 150 },
{ text: ‘If Active’, datafield: ‘Active’, width: 80 }
]
});
$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

// update row.

$(“#updaterowbutton”).bind(‘click’, function () {
/* var datarow s generaterow(); */
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
alert(“Rowscount count (before)” + rowscount);
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});
});

[Peter StoevKeymaster]

Hi Keshavan,

Please, take a look at the jqxGrid’s API documentation what parameter is expected when you call the “getrowdata” method. It is not Row ID, it is Row Index. In the provided code, you use Row ID as parameter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts