jQuery UI Widgets › Forums › Lists › ListBox › Several ValueMember in JSON array
Tagged: dataadapter, displayMember, jqxDataAdapter, jqxListBox, json, ListBox, valueMember
This topic contains 6 replies, has 2 voices, and was last updated by Dimitar 12 years, 4 months ago.
-
Author
-
Hi, Peter.
How can I get several ValueMembers?
In example “Bind the ListBox to JSON data” u operate with displayMember and only one valueMember. But I have several valueMembers in JSON array. I need to get them all for every displayMember. But how?..This example of my code, but it didn’t work 🙁
var source =
{
datatype: "json",
datafields: [
{ name: 'CompanyName' },
{ name: 'ContactName' },
{ name: 'ContactTitle' },
{ name: 'Address' }
],
id: 'id',
url: 'customers.txt'
};var dataAdapter = new $.jqx.dataAdapter(source);
// Create a jqxListBox
$("#jqxWidget").jqxListBox({ source: dataAdapter,
displayMember: "ContactName",
valueMember: "CompanyName",
valueMember: "ContactTitle",
valueMember: "Address",
width: 200, height: 250, theme: '' });
$("#jqxWidget").bind('select', function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var labelelement = $("");
labelelement.html("Label: " + item.label);
var valueelement1 = $("");
valueelement1.html("Value: " + item.value[0]);
var valueelement2 = $("");
valueelement3.html("Value: " + item.value[1]);
var valueelement3 = $("");
valueelement1.html("Value: " + item.value[2]);
$("#selectionlog").children().remove();
$("#selectionlog").append(labelelement);
$("#selectionlog").append(valueelement1);
$("#selectionlog").append(valueelement2);
$("#selectionlog").append(valueelement3);
}
}
});JSON data:
[{"CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Country":"Germany"},{"CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitucin 2222","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Antonio Moreno Taquera","ContactName":"Antonio Moreno","ContactTitle":"Owner","Address":"Mataderos 2312","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Around the Horn","ContactName":"Thomas Hardy","ContactTitle":"Sales Representative","Address":"120 Hanover Sq.","City":"London","Country":"UK"},{"CompanyName":"Berglunds snabbkp","ContactName":"Christina Berglund","ContactTitle":"Order Administrator","Address":"Berguvsvgen 8","City":"Lule","Country":"Sweden"},{"CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","ContactTitle":"Sales Representative","Address":"Forsterstr. 57","City":"Mannheim","Country":"Germany"},{"CompanyName":"Blondesddsl pre et fils","ContactName":"Frdrique Citeaux","ContactTitle":"Marketing Manager","Address":"24, place Klber","City":"Strasbourg","Country":"France"},{"CompanyName":"Blido Comidas preparadas","ContactName":"Martn Sommer","ContactTitle":"Owner","Address":"C\/ Araquil, 67","City":"Madrid","Country":"Spain"},{"CompanyName":"Bon app'","ContactName":"Laurence Lebihan","ContactTitle":"Owner","Address":"12, rue des Bouchers","City":"Marseille","Country":"France"},{"CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","ContactTitle":"Accounting Manager","Address":"23 Tsawassen Blvd.","City":"Tsawassen","Country":"Canada"},{"CompanyName":"B's Beverages","ContactName":"Victoria Ashworth","ContactTitle":"Sales Representative","Address":"Fauntleroy Circus","City":"London","Country":"UK"},{"CompanyName":"Cactus Comidas para llevar","ContactName":"Patricio Simpson","ContactTitle":"Sales Agent","Address":"Cerrito 333","City":"Buenos Aires","Country":"Argentina"},{"CompanyName":"Centro comercial Moctezuma","ContactName":"Francisco Chang","ContactTitle":"Marketing Manager","Address":"Sierras de Granada 9993","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Chop-suey Chinese","ContactName":"Yang Wang","ContactTitle":"Owner","Address":"Hauptstr. 29","City":"Bern","Country":"Switzerland"},{"CompanyName":"Comrcio Mineiro","ContactName":"Pedro Afonso","ContactTitle":"Sales Associate","Address":"Av. dos Lusadas, 23","City":"Sao Paulo","Country":"Brazil"},{"CompanyName":"Consolidated Holdings","ContactName":"Elizabeth Brown","ContactTitle":"Sales Representative","Address":"Berkeley Gardens 12 Brewery","City":"London","Country":"UK"},{"CompanyName":"Drachenblut Delikatessen","ContactName":"Sven Ottlieb","ContactTitle":"Order Administrator","Address":"Walserweg 21","City":"Aachen","Country":"Germany"},{"CompanyName":"Du monde entier","ContactName":"Janine Labrune","ContactTitle":"Owner","Address":"67, rue des Cinquante Otages","City":"Nantes","Country":"France"},{"CompanyName":"Eastern Connection","ContactName":"Ann Devon","ContactTitle":"Sales Agent","Address":"35 King George","City":"London","Country":"UK"},{"CompanyName":"Ernst Handel","ContactName":"Roland Mendel","ContactTitle":"Sales Manager","Address":"Kirchgasse 6","City":"Graz","Country":"Austria"}]Hello SpaceQuester,
There is no way to associate more than one valueMember to a displayMember. However, you can use jqxDataAdapter to access the whole record (row), with the displayMember / a member of your choosing acting as a key.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar, can u show the example?
Hi SpaceQuester,
Here is an example, which alerts three of the datafields of the first element (it is based on this demo).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items." /> <title id='Description'>In this demo the jqxListBox is bound to JSON data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var url = "../sampledata/customers.txt"; var parentsLength = $("#jqxWidget").parents().length; if (parentsLength > 3) { url = 'demos/sampledata/customers.txt'; } // prepare the data var source = { datatype: "json", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' }, { name: 'ContactTitle' } ], id: 'id', url: url }; var values = {}; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { values = dataAdapter.records[0]; var data = values['ContactName'] + ", " + values['CompanyName'] + ", " + values['ContactTitle']; alert(data); } }); // Create a jqxListBox $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: theme }); $("#jqxWidget").bind('select', function (event) { if (event.args) { var item = event.args.item; if (item) { var valueelement = $("<div></div>"); valueelement.html("Value: " + item.value); var labelelement = $("<div></div>"); labelelement.html("Label: " + item.label); $("#selectionlog").children().remove(); $("#selectionlog").append(labelelement); $("#selectionlog").append(valueelement); } } }); }); </script> <div id='jqxWidget'> </div> <div style="font-size: 13px; font-family: Verdana;" id="selectionlog"> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank u!
I found solution too:
$("#jqxListBoxTeams").bind('select', function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var index = $("#jqxListBoxTeams").jqxListBox('getSelectedIndex');
var subteam = dataAdapter_jqx_listbox_teams.records[index]['subteam'];
var subsubteam = dataAdapter_jqx_listbox_teams.records[index]['subsubteam'];
var labelelement = $("");
labelelement.html("Label: " + item.label);
var valueelement1 = $("");
valueelement1.html("Value1: " +subteam);
var valueelement2 = $("");
valueelement2.html("Value2: " +subsubteam);
$("#SelectionLogTeams").children().remove();
$("#SelectionLogTeams").append(labelelement);
$("#SelectionLogTeams").append(valueelement1);
$("#SelectionLogTeams").append(valueelement2);
}
}
});
What is the right “code” tag here? “
...
” didn’t workHello SpaceQuester,
Please take a look at the forum topic Code Formatting.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.