Grid-Issue in Add mode with DropDownList

[KeshavanParticipant]

Hi,

I have a grid in which the first cell is of col type ‘dropdownlist’, this field will display ‘GroupName’ from foreign data source (GroupName and GroupCompanyId are 2 fields in foreign data source) for all the matching ‘GroupCompanyId’ field in the main data source in Grid.

Issue is the code hangs in ‘ADD’ mode, as the ‘GroupCompanyId’ field would be null for new rows, the code will keep searching for GroupName from foreign data source , trying to match the corresponding ‘GroupCompanyId’ in each row of main data source in Grid.

Following lines are the ones needing change, I have pasted the entire code further down, please help.

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

2) Grid Initialization,

{
text: ‘Group’, datafield: ‘GroupCompanyId’, displayfield: ‘Group’, columntype: ‘dropdownlist’, width: 200,
createeditor: function (row, cellvalue, editor)
{
editor.jqxDropDownList({ source: dataAdapter1, displayMember: ‘Group’, valueMember: ‘GroupCompanyId’ })
}
},

Thanks,

Keshavan

$(document).ready(function () {
// prepare data from external GroupCompany entity
var z = 0;

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 GroupCompanyIds = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var CompanyNames = [“Nancy”, “Andrew”, “Janet”, “Margaret”, “Steven”, “Michael”, “Robert”, “Laura”, “Anne”];
var Unitss = [111, 555, 777, 888, 999.100, 11100];
var Phones = [“Davolio”, “Fuller”, “Leverling”, “Peacock”, “Buchanan”, “Suyama”, “King”, “Callahan”, “Dodsworth”];
var EmailIds = [“Davolio”, “Fuller”, “Leverling”, “Peacock”, “Buchanan”, “Suyama”, “King”, “Callahan”, “Dodsworth”];
var AddressLine1s = [“Sales Representative”, “Vice President, Sales”, “Sales Representative”, “Sales Representative”, “Sales Manager”, “Sales Representative”, “Sales Representative”, “Inside Sales Coordinator”, “Sales Representative”];
var AddressLine2s = [“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 Zips = [“Seattle”, “Tacoma”, “Kirkland”, “Redmond”, “London”, “London”, “London”, “Seattle”, “London”];
var Countrys = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];
var Cultures = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];
var Miscellaneous1s = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];
var Miscellaneous2s = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];
var Miscellaneous3s = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];
var generaterow = function (id) {
var row = {};
row[“CompanyId”] = id;
row[“GroupCompanyId”] = 1;
row[“CompanyName”] = ” “;
row[“Unit”] = 0;
row[“Phone”] = ” “;
row[“EmailId”] = ” “;
row[“AddressLine1”] = ” “;
row[“AddressLine2”] = ” “;
row[“Zip”] = ” “;
row[“Country”] = ” “;
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: ‘GroupCompanyId’, type: ‘int’ },
{ 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’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘Company/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);
}
});
},
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: 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 },
]
});
$(“#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;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});
});

[KeshavanParticipant]

Hi,

Request some help in this post.

Thanks,

Keshavan

[KeshavanParticipant]

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

Thanks,

Keshavan

[Peter StoevKeymaster]

Hi Keshavan,

Please provide step by step instructions which demonstrate how to reproduce the issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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

[Peter StoevKeymaster]

Hi Keshavan,

When you add a new row, you may set its foreign field before calling the Grid’s addrow method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[KeshavanParticipant]

Hi Peter,

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

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

[Peter StoevKeymaster]

Hi Keshavan,

You may initialize a DropDownList editor either in the column’s createeditor or initeditor callback function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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

[Peter StoevKeymaster]

Hi Keshavan,

In the posted code, the jqxDropDownList will be associated to a jqxDataAdapter instance called: dataAdapter1. It will display only the fields loaded from the jqxDataAdapter i.e what is in the dataAdapter1.records field.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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

[Author]

Posts