jQWidgets Forums
jQuery UI Widgets › Forums › Grid › jqxDropdownlist – inline Editing Grid
Tagged: displayMember, DropDownList, editor, grid, jqxDropDownList, jqxgrid, update, valueMember
This topic contains 11 replies, has 2 voices, and was last updated by Nadezhda 10 years ago.
-
Author
-
Hi,
I am using the jqxDropdownList for the jqxGrid inline editing and Once a value is selected from the jqxDropdownList inside the grid, it updates the value to json with displaymember instead of valuemember.
So, How can we get the valumember value in the josn for the above scenario.
Hello user3i,
You can find how to set/get ‘valuemember’ in API Documentation.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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: 0Hi user3i,
Please, find the following part of code which shows how to use ‘valueMember’ and ‘displayMember’ in editor.jqxDropDownList. I hope it would be helpful to you.
{ text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist', createeditor: function (row, column, editor) { // assign a new data source to the dropdownlist. 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); }); },
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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.Hi user3i,
Yes, you can use mapping with JSON Data. For more information you may refer to the jqxDataAdapter’s “Getting Started” help topic.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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]Hi user3i,
Please, find the following example where it is shown data fields mapping with JSON Data. I hope it would be helpful to you.
var data = [ { "state": { "id": "x526", "city": { "name": "Beverly Hills", "id": 90210, "value": "Beverly Hills" } } } ]; var source = { datatype: 'json', localdata: data, datafields: [ { name: 'cityName', map: 'state>city>name' } ] }; var dataAdapter = new $.jqx.dataAdapter(source);
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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]Hi user3i,
You may take a look at the demo Keys/Values Column. It shows how to get the cell’s label and value.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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.Hi User3i,
Please, provide us with jsfiddle example so that we may get a better understanding of your scenario and be able to help.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.