[user3iParticipant]

Hi Peter,

Did you get a chance to look in to it. If yes then Please reply.

Thanks,
User3i.

[user3iParticipant]

Hi Peter,

Thanks for your reply.

Please find the following sample link in jsfiddle and please select any value from the editable jqxcomBobox column and you can see the error “Uncaught TypeError: r.label.match is not a function” in the console.

sample link:-
https://jsfiddle.net/user3i/zjtwffqz/

Thanks and regards,
User3i

[user3iParticipant]

Hi Nadezhda,

Thanks for your help and continuous reply.

I can understand the above example and it works fine, for this scenario where we have the display and value field in Json.

columns: [
{text: ‘Employee Name’, datafield: ‘EmployeeID’, displayfield: ‘EmployeeName’, columntype: ‘dropdownlist’, width: 150}
]

But in my secnario,

I don’t have the display-field in json but i have a data-field (“Type”) with values “L,R,C” and I should display this to user as “Left,Right,Center” like this.

If the dropdown is selected with “Left” then the data-field “Type” should get updated with “L” and the grid should display “Left” where I dont have a displayfield in my json which needs to be hardcoded in the page level.

This is my scenario which is not matching with the above examples you porvided.

Please help us on this.

Thanks,
User3i.

[user3iParticipant]

Hi Nadezhda,

Thanks for your reply.

I made an example with your sample, after selection Still I am getting displaymember value in json not getting the valuemember in the json.
Please refer the below example.

Code:-

$(document).ready(function() {
// prepare the data
var data = [
{
“Employee”: {
“id”: “x526”,
“Details”: {
“shipproduct”: “Black Tea”,
“shipCountry”: “D”
}
}
}
];

var source = {
datatype: ‘json’,
localdata: data,
datafields:
[
{
name: ‘id’, map: ‘Employee>id’,
name: ‘shipCountry’, map: ‘Employee>Details>shipCountry’,
name: ‘shipproduct’, map: ‘Employee>Details>shipproduct’
}
]
};

var dataAdapter = new $.jqx.dataAdapter(source);
var source = dataAdapter;
$(“#jqxgrid”).jqxGrid({
width: 850, source: source,selectionmode: ‘singlecell’,editable: true,pageable: true,autoheight: true,
columns: [{
text: ‘id’,datafield: ‘id’,width: 150,columntype: ‘combobox’},
{
text: ‘ship Country’, datafield: ‘shipCountry’,width: 150,columntype: ‘dropdownlist’,
createeditor: function(row, column, editor) {
var list = [{
text: “Germany”,value: “G”}, {
text: “Brazil”,value: “B” }, {
text: “France”,value: “F” }];

editor.jqxDropDownList({
autoDropDownHeight: true, source: list,displayMember: ‘text’,valueMember: ‘value’
});
editor.on(‘change’, function(event) {
alert(“label: ” + event.args.item.label + “, value: ” + event.args.item.value);
});
}

}, {
text: ‘product Name’,datafield: ‘shipproduct’
}]
});
});

Result:-

$(‘#jqxgrid’).jqxGrid(‘source’).records
[ObjectshipCountry: “Brazil”shipproduct: “Black Tea”uid: 0__proto__: Object]

[user3iParticipant]

I can see valueMember and displayMember properties in the jqxComboBox documentaion.
I will raise the same in appropriate forum.

[user3iParticipant]

Hi Nadezhda,

Thanks for you reply. I had read the same links.

Please see the example below, Once we selected the value from the shipcountry column with value “Brazil”, it updates the json with “Brazil” instead of “B” why this is happening, it should update the valumember “B” and display the displaymember “Brazil”.

Code:-

$(document).ready(function() {
// prepare the data
var data = new Array();
var firstName = [
“Andrew”, “Nancy”, “Shelley”, “Regina”
];
var shipCountry = [
“Germany”, “Brazil”, “France”, “Italy”
];
var shipproduct = [
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”
];
var children = new Array();
for (var i = 0; i < 4; i++) {
var row = {};
row.firstName = firstName[i];
row.shipCountry = shipCountry[i];
row.shipproduct = shipproduct[i];
children.push(row);
}
var obj = new Object();
obj.children = children;
var source = {
datatype: “json”,
localdata: obj,
datafields: [{
name: ‘firstName’,
type: ‘string’
}, {
name: ‘shipCountry’,
type: ‘string’
}, {
name: ‘shipproduct’,
type: ‘string’
}]
};
$(“#jqxgrid”).jqxGrid({
width: 850,
source: source,
selectionmode: ‘singlecell’,
editable: true,
pageable: true,
autoheight: true,
columns: [{
text: ‘first Names’,
datafield: ‘firstName’,
width: 150,
columntype: ‘combobox’,
createeditor: function(row, column, editor) {
// assign a new data source to the combobox.
var list = [‘Stuttgart’, ‘Rio de Janeiro’, ‘Strasbourg’];
editor.jqxComboBox({
autoDropDownHeight: true,
source: list,
promptText: “Please Choose:”
});
}

}, {
text: ‘ship Country’,
datafield: ‘shipCountry’,
width: 150,
columntype: ‘dropdownlist’,
createeditor: function(row, column, editor) {
var list = [{
text: “Germany”,
value: “G”
}, {
text: “Brazil”,
value: “B”
}, {
text: “France”,
value: “F”
}];

editor.jqxDropDownList({
autoDropDownHeight: true,
source: list,
displayMember: ‘text’,
valueMember: ‘value’
});
editor.on(‘change’, function(event) {
alert(“label: ” + event.args.item.label + “, value: ” + event.args.item.value);
});
}

}, {
text: ‘product Name’,
datafield: ‘shipproduct’,
columntype: ‘combobox’
}]
});
});

Result:-

$(‘#jqxgrid’).jqxGrid(‘source’).records
[ObjectfirstName: “Andrew”shipCountry: “Brazil”shipproduct: “Black Tea”uid: 0__proto__: Object, ObjectfirstName: “Nancy”shipCountry: “Brazil”shipproduct: “Green Tea”uid: 1__proto__: Object, ObjectfirstName: “Shelley”shipCountry: “Germany”shipproduct: “Caffe Espresso”uid: 2__proto__: Object, ObjectfirstName: “Regina”shipCountry: “Brazil”shipproduct: “Doubleshot Espresso”uid: 3__proto__: Object]

[user3iParticipant]

Hi Nadezhda,

Thanks for your reply. I can understand the working terminology.

We can get the event.args.item.label as well as event.args.item.value inside the change() function.

In my case the datagrid cell should show the displaymember value and the mapped json should contain the valuemember value but it will not happen automatically, is it right?

If then, we have to do some coding to set the valuemember value to the mapped-json once the dropdownlist selected, correct?

regards,
user3i.

[user3iParticipant]

Hi ,

Please refer the following example and if we try to select and set the value for column “shipcountry” as Germany then the row data should be “G” for the column shipcountry but it gives “Germany” for that.

Example:–
———-
<div id=”jqxgrid”></div>

$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames = [
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”];
var lastNames = [
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”];
var productNames = [
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”];
var priceValues = [
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”];
for (var i = 0; i < 100; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;
data[i] = row;
}
var source = {
localdata: data,
datatype: “array”
};
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: source,
selectionmode: ‘singlecell’,
editable: true,
pageable: true,
autoheight: true,
columns: [
{
text: ‘Ship City’, datafield: ‘ShipCity’, width: 150, columntype: ‘combobox’,
createeditor: function (row, column, editor) {
// assign a new data source to the combobox.
var list = [‘Stuttgart’, ‘Rio de Janeiro’, ‘Strasbourg’];
editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: “Please Choose:” });
},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”) return oldvalue;
}
},
{
text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150, columntype: ‘dropdownlist’,

createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var val = ‘G,B,F’;
var dis = ‘Germany,Brazil,France’;
var listval =val.split(“,”) ;
var listdis =dis.split(“,”);
var children=new Array();
for(var i=0;i<listval.length;i++)
{
var obj=new Object();
if(typeof(listval[i])!=”undefined”)
{
obj.dropdownLabel=listdis[i];
obj.dropdownValue=listval[i];
children.push(obj);
}
}

editor.jqxDropDownList({ autoDropDownHeight: true, source: children, displayMember: ‘dropdownLabel’, valueMember: ‘dropdownValue’ });
},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”) return oldvalue;
}
},
{ text: ‘Ship Name’, datafield: ‘ShipName’, columntype: ‘combobox’ }
]
});
});

Result:

$(“#jqxgrid”).jqxGrid(‘getrowdata’, 0);
ShipCountry: “Germany” // it should be G
firstname: “Andrew”
lastname: “Petersen”
price: 3.8
productname: “Cramel Latte”
quantity: 8
total: 30.4
uid: 0

[Author]

Posts