Grid addrow – issue

[KeshavanParticipant]

Hi,

I am able to create a blank row in grid, enter all values for the columns in row (also checked the Json object – it has all entered column values), the execution of code goes through ‘success’ function, ajax call doesn’t seem to have executed , as when i refresh
grid , i get message ‘no data to display. I have the ‘addrow’ code below, please let me know what’s the issue ?.

I have the full code further down.

addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
alert(“rowdata value in addrow ” + rowdata);
$.ajax
({
cache: false,
dataType: ‘json’,
data: rowdata,
type: “POST”,
url: ‘MemberEmployee/Add’,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
alert(“Commit invoked…. “);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
alert(“Commit not invoked…. “);
}

});
},

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 generaterow = function (id) {
var row = {};
row[“MemberEmployeeId”] = id;
row[“DepartmentId”] = 1;
row[“CompanyId”] = 1;
row[“EmployeeCode”] = ” “;
row[“EmployeeName”] = ” “;
row[“MobileNo”] = ” “;
row[“EmailId”] = ” “;
row[“Active”] = 1;
return row;
}
// source for main grid

var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘MemberEmployeeId’ },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values:
{ source: dataAdapater2.records,
value: ‘DepartmentId’, name: ‘DepartmentName’
}
},
{ name: ‘DepartmentName’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values:
{ source: dataAdapater1.records,
value: ‘CompanyId’, name: ‘CompanyName’
}
},
{ name: ‘CompanyName’ },
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘MemberEmployeeId’,
url: ‘MemberEmployee/GetEmployees’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
alert(“rowdata value in addrow ” + rowdata);
$.ajax
({
cache: false,
dataType: ‘json’,
data: rowdata,
type: “POST”,
url: ‘MemberEmployee/Add’,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
alert(“Commit invoked…. “);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
alert(“Commit not invoked…. “);
}

});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘MemberEmployee/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: ‘/MemberEmployee/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, { autoBind: true });
$(“#jqxgrid”).jqxGrid(
{
width: 950,
height: 350,
source: dataAdapater3,
sortable: true,
theme: ‘ui-smoothness’,
pageable: true,
editable: true,
editmode: ‘selectedcell’,
rowdetails: true,
selectionmode: ‘singlerow’,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
rowsheight: 20,
altrows: true,
columns:
[
{ 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: ‘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: ‘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 selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
alert(“selectedrowindex value is ” + selectedrowindex);
$(‘#jqxGrid’).jqxGrid({ selectedrowindex: selectedrowindex });
$(‘#jqxGrid’).jqxGrid(‘selectrow’, selectedrowindex);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
alert(“rowscount is ” + rowscount);
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});
});

[Peter StoevKeymaster]

Hi Keshavan,

If the Ajax is executed and the Row is not added to the Database, then you should debug your server code as that is not related to jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[KeshavanParticipant]

Hi Peter,

I checked, rowID goes as 0 and hence issue, new row on the db is not generated ( as the table identity col is 0).

let me know the difference between rowid and rowindex. some issue there in my code because of that.

Thanks,

Keshavan

[KeshavanParticipant]

Hi Peter,

It’s the same server side code in my other forms and they are working great, in fact , in these working forms i have Syntax errors on client side code and they are working in spite of errors!!!!.

The form that i have issues, has no such syntax errors on client side code and uses same pattern server code , i have issue in ‘addrow’ method’s ajax call, as i believe.

I have pasted code with which i have issues under heading ‘ Not working Code’, Please give your inputs.

fyi, i have also pasted the code (in which i have syntax errors on client side code) but working, under title ‘working Code.’

Thanks,

Keshavan

Not Working 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 generaterow = function (id) {
var row = {};
row[“MemberEmployeeId”] = id;
row[“DepartmentId”] = 1;
row[“DepartmentName”] = ” “;
row[“CompanyId”] = 1;
row[“CompanyName”] = ” “;
row[“EmployeeCode”] = ” “;
row[“EmployeeName”] = ” “;
row[“MobileNo”] = ” “;
row[“EmailId”] = ” “;
row[“Active”] = 1;
return row;
}
// source for main grid

var source3 =
{
datatype: “json”,
datafields:
[
{ name: ‘MemberEmployeeId’ },
{ name: ‘DepartmentId’, value: ‘DepartmentId’, values:
{ source: dataAdapater2.records,
value: ‘DepartmentId’, name: ‘DepartmentName’
}
},
{ name: ‘DepartmentName’ },
{ name: ‘CompanyId’, value: ‘CompanyId’, values:
{ source: dataAdapater1.records,
value: ‘CompanyId’, name: ‘CompanyName’
}
},
{ name: ‘CompanyName’ },
{ name: ‘Employeecode’ },
{ name: ‘EmployeeName’ },
{ name: ‘MobileNo’ },
{ name: ‘EmailId’ },
{ name: ‘Active’ }
],
id: ‘MemberEmployeeId’,
url: ‘MemberEmployee/GetEmployees’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
alert(“rowdata value in addrow ” + rowdata);
$.ajax({
dataType: ‘json’,
url: ‘../MemberEmployee/Add’,
data: rowdata,
type: “POST”,
cache: false,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
alert(“commit(true); Called “);
},
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: ‘MemberEmployee/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: ‘/MemberEmployee/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, { autoBind: true });
$(“#jqxgrid”).jqxGrid(
{
width: 950,
height: 350,
source: dataAdapater3,
sortable: true,
theme: ‘ui-smoothness’,
pageable: true,
editable: true,
editmode: ‘selectedcell’,
rowdetails: true,
selectionmode: ‘multiplerows’,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
rowsheight: 20,
altrows: true,
columns:
[
{ 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: ‘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: ‘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 selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
alert(“selectedrowindex value is ” + selectedrowindex);
$(‘#jqxGrid’).jqxGrid({ selectedrowindex: selectedrowindex });
$(‘#jqxGrid’).jqxGrid(‘selectrow’, selectedrowindex);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
alert(“rowscount is ” + rowscount);
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});
});

Working Code.(few syntax errors( ex., usage of ‘,’ in last elements of Source/Grid definitions)
———————————————————————————————————————-

This example shows how to bind with Db

$(document).ready(function () {
// prepare data from external GroupCompany entity
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘GroupCompanyId’ },
{ name: ‘GroupName’ },
],
id: ‘GroupCompanyId’,
url: ‘GroupCompany/GetSemiGroupCompanies’,
async: false
}
var dataAdapater1 = new $.jqx.dataAdapter(source, { autoBind: true })
var data = {};
var generaterow = function (id) {
var row = {};
row[“CompanyId”] = id;
row[“GroupCompanyId”] = 1;
row[“CompanyName”] = ” “;
row[“Unit”] = 0;
row[“Phone”] = ” “;
row[“EmailId”] = ” “;
row[“Culture”] = ” “;
row[“Miscellaneous1″] = ” “;
row[“Miscellaneous2″] = ” “;
row[“Miscellaneous3″] = ” “;
return row;
}
var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’ },
{ name: ‘Group’, value: ‘GroupCompanyId’, values: { source: dataAdapater1.records,
value: ‘GroupCompanyId’, name: ‘GroupName’
}
},
{ name: ‘GroupName’ },
{ name: ‘CompanyName’ },
{ name: ‘Unit’ },
{ name: ‘Phone’ },
{ name: ‘EmailId’ },
{ name: ‘Culture’ },
{ name: ‘Miscellaneous1’ },
{ name: ‘Miscellaneous2’ },
{ name: ‘Miscellaneous3’ },
/* { name: ‘GroupCompany.GroupCompanyId’ },
{ name: ‘GroupCompany.GroupName’ },
{ name: ‘GroupCompany.Miscellaneous1’ },
{ name: ‘GroupCompany.Country’ },
{ name: ‘GroupCompany.Culture’ },*/
],
id: ‘CompanyId’,
url: ‘Company/GetCompanies’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({

alert(“Ajax insert Call “);
cache: false,
dataType: ‘json’,
url: ‘Company/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
alert(“commit(true); Called “);
},
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: ‘/Company/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);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘Company/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);
}
}
);
}
}
}
var dataAdapater = new $.jqx.dataAdapter(source1);
// initialize jqxGrid../../JqWidgets/index.htm
$(“#jqxgrid”).jqxGrid(
{
width: 955,
height: 350,
source: dataAdapater,
theme: ‘ui-smoothness’,
editable: true,
selectionmode: ‘multiplecells’,
editmode: ‘click’,
rowdetails: true,
rowsheight: 20,
sortable: true,
pageable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
altrows: true,
columns:
[
{
text: ‘Group Name’, datafield: ‘GroupCompanyId’, columntype: ‘dropdownlist’, displayfield:
‘GroupName’, datafield: ‘GroupCompanyId’, width: 150,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList
({ source: dataAdapater1, displayMember: ‘GroupName’,
valueMember: ‘GroupCompanyId’
});

}
},
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 200 },
{ text: ‘Unit’, datafield: ‘Unit’, width: 30 },
{ text: ‘Admin Telephone’, datafield: ‘Phone’, width: 110 },
{ text: ‘Admin Email ‘, datafield: ‘EmailId’, width: 145 },
{ text: ‘Culture’, datafield: ‘Culture’, width: 50 },
{ text: ‘Other Info’, datafield: ‘Miscellaneous1’, width: 80 },
{ text: ‘ ‘, datafield: ‘Miscellaneous2’, width: 80 },
{ text: ‘ ‘, datafield: ‘Miscellaneous3’, width: 80 },
]
});
$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

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

[Author]

Posts