[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);
}
});
});

[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 Mariya,

Thanks for the quick response, will go through the code and will get back, if only i have any issues.

Best Regards,

Keshavan

[KeshavanParticipant]

Hi Dimitar,

Thanks for the clarifcation, i will implement the solution accordingly.

Best Regards,

Keshavan

[KeshavanParticipant]

Hi,

I have solved the earlier issue mentioned (1st post ) , there is some new issue as below.

When i load the Grid, the ‘dropdowlist’ doesn’t DISPLAY the ‘GroupName’ in the ‘GroupColumnId’ column.

Insert mode is workng fine and i saw the record with all values in table. I checked server code for fetching data and is perfect.

Please help, the code is same as pasted earlier.

Thanks,

Keshavan

[KeshavanParticipant]

Hi,

I have solved the issue mentioned,

When i load the Grid, the ‘dropdowlist’ doesn’t DISPLAY the ‘GroupName’ in the ‘GroupColumnId’ column.

Insert mode is workng fine and i saw the record with all values in table. I checked server code for fetching data and is perfect.

Please help, the code is same as pasted earlier.

Thanks,

Keshavan

[KeshavanParticipant]

Hi Peter,

ok, please send me if any sample code is available w.r.t having ‘dropdownlist’ as col type and add/edit mode in CRUD.

Thanks,

Keshavan

[KeshavanParticipant]

Hi Peter,

I have done that, but dropdownlist shows only 1 GroupName (instead of 6 existing) and disappears
as i move to next field.

any Issues in below code ?

var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’},
/* { name: ‘Group’, value: ‘GroupCompanyId’, values: {source: dataAdapater1.records, value: ‘GroupCompanyId’, name:’GroupName’}},*/
{name: ‘GroupCompanyId’, value: ‘GroupCompanyId’, values: {source: dataAdapater1.records, value: ‘GroupCompanyId’, name:’GroupName’}},
{ name: ‘Unit’},
{ name: ‘Phone’ },
{ name: ‘EmailId’ },
{ name: ‘AddressLine1’ },
{ name: ‘AddressLine2’ },
{ name: ‘Zip’ },
{ name: ‘Country’ },
{ name: ‘Culture’ },
{ name: ‘Miscellaneous1’ },
{ name: ‘Miscellaneous2’ },
{ name: ‘Miscellaneous3’ },
],
id: ‘CompanyId’,
url: ‘Company/GetCompanies’,

columns:
[
{
text: ‘Group’, datafield: ‘GroupCompanyId’, displayfield: ‘Group’, columntype: ‘dropdownlist’, width: 200,
createeditor: function (row, cellvalue, editor)
{
editor.jqxDropDownList({ source: dataAdapter1, displayMember: ‘Group’, valueMember: ‘GroupCompanyId’ });
}
},
{ text: ‘Company’, datafield: ‘CompanyName’, width: 215 },
{ text: ‘Unit’, datafield: ‘Unit’, width: 80 },
{ text: ‘Phone’, datafield: ‘Phone’, width: 180 },
{ text: ‘Email ‘, datafield: ‘EmailId’, width: 180 },
{ text: ‘Address ‘, datafield: ‘AddressLine1’, width: 100 },
{ text: ‘ ‘, datafield: ‘AddressLine2’, width: 100 },
{ text: ‘Zip’, datafield: ‘Zip’, width: 80 },
{ text: ‘Country’, datafield: ‘Country’, width: 80 },
{ text: ‘Culture’, datafield: ‘Culture’, width: 80 },
{ text: ‘Other’, datafield: ‘Miscellaneous1’, width: 80 },
{ text: ‘ ‘, datafield: ‘Miscellaneous2’, width: 80 },
{ text: ‘ ‘, datafield: ‘Miscellaneous3’, width: 80 },
]

Thanks,

Keshavan

[KeshavanParticipant]

Hi Peter,

I tried with out success, can u please give me some sample code,

How to Initialize a field in a newly added row, ie.,attach a dropdownlist to the 1st celll of the row.

Thanks,

Keshavan

[KeshavanParticipant]

Hi Peter,

Thanks , i will try accordingly and get back to you if issue persists.

Thanks,

Keshavan

[KeshavanParticipant]

1) I have a Grid, with column type ‘Dropdownlist’ for each cell of 1st column.

2) Data for Dropdownlist comes from foreign source, – dataAdapter1.

var source =
{
datatype: “json”,
datafields:
[
{ name: ‘GroupCompanyId’ },
{ name: ‘GroupName’ },
],
id: ‘GroupCompanyId’,
url: ‘GroupCompany/GetSemiGroupCompanies’,
async: false
}
var dataAdapater1 = new $.jqx.dataAdapter(source, {
autoBind: true
});

3) Data source for the main grid is,

var source1 =
{
datatype: “json”,
datafields:
[
{ name: ‘CompanyId’ },
{ name: ‘Group’, value: ‘GroupCompanyId’, values: {source: dataAdapater1.records, value: ‘GroupCompanyId’, name:’GroupName’}},
{ name: ‘GroupCompanyId’},
{ name: ‘Unit’ },
{ name: ‘Phone’ },
{ name: ‘EmailId’ },
{ name: ‘AddressLine1’ },
{ name: ‘AddressLine2’ },
{ name: ‘Zip’ },
{ name: ‘Country’ },
{ name: ‘Culture’ },
{ name: ‘Miscellaneous1’ },
{ name: ‘Miscellaneous2’ },
{ name: ‘Miscellaneous3’ },
],
id: ‘CompanyId’,
url: ‘Company/GetCompanies’,

4) Grid initialization is as below,

$(“#jqxgrid”).jqxGrid(
{
width: 950,
height: 350,
source: source1,
theme: ‘ui-smoothness’,
editable: true,
editmode: ‘selectedcell’,
rowdetails: true,
rowsheight: 20,
columns:
[
{
text: ‘Group’, datafield: ‘GroupCompanyId’, displayfield: ‘Group’, columntype: ‘dropdownlist’, width: 200,
createeditor: function (row, cellvalue, editor)
{
editor.jqxDropDownList({ source: dataAdapter1, displayMember: ‘Group’, valueMember: ‘GroupCompanyId’ });
}
},
{ text: ‘Company’, datafield: ‘CompanyName’, width: 215 },
{ text: ‘Unit’, datafield: ‘Unit’, width: 80 },
{ text: ‘Phone’, datafield: ‘Phone’, width: 180 },
{ text: ‘Email ‘, datafield: ‘EmailId’, width: 180 },
{ text: ‘Address ‘, datafield: ‘AddressLine1’, width: 100 },
{ text: ‘ ‘, datafield: ‘AddressLine2’, width: 100 },
{ text: ‘Zip’, datafield: ‘Zip’, width: 80 },
{ text: ‘Country’, datafield: ‘Country’, width: 80 },
{ text: ‘Culture’, datafield: ‘Culture’, width: 80 },
{ text: ‘Other’, datafield: ‘Miscellaneous1’, width: 80 },
{ text: ‘ ‘, datafield: ‘Miscellaneous2’, width: 80 },
{ text: ‘ ‘, datafield: ‘Miscellaneous3’, width: 80 },
]
});

5) Issue:

The code works in Update mode, but doesn’t in Add mode, as a newly added row will not have any value in the 1st cell of the newly to be entered row, the below line from point 3) mentioned above fails.

{ name: ‘Group’, value: ‘GroupCompanyId’, values: {source: dataAdapater1.records, value: ‘GroupCompanyId’, name:’GroupName’}}

I need to write additional line as above for add(fetching all the data from groupcompany table).

I am unable to write an if clause (based on say var ‘z’ or using mode (add/ update) , as if condition is rejected in data source definition
and that is my problem.

If my explanation is not clear i am prepared to send another update which will clarify my issue.

Thanks,

Keshavan

[KeshavanParticipant]

Can some one in Jqwidgets.com please reply, unless my clarifcation is not worth answering.

Thanks,

Keshavan

[KeshavanParticipant]

Hi,

Request some help in this post.

Thanks,

Keshavan

[KeshavanParticipant]

Please Ignore this post

[KeshavanParticipant]

Hi Peter,

Issue solved with your example code, Thanks for the fast response.

Thanks,

Keshavan

[Author]

Posts