jQuery UI Widgets Forums Lists ListBox Several ValueMember in JSON array

This topic contains 6 replies, has 2 voices, and was last updated by  Dimitar 11 years, 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Several ValueMember in JSON array #8254

    SpaceQuester
    Member

    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"}]

    Several ValueMember in JSON array #8273

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Several ValueMember in JSON array #8281

    SpaceQuester
    Member

    Dimitar, can u show the example?

    Several ValueMember in JSON array #8285

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Several ValueMember in JSON array #8287

    SpaceQuester
    Member

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

    Several ValueMember in JSON array #8288

    SpaceQuester
    Member

    What is the right “code” tag here? “...” didn’t work

    Several ValueMember in JSON array #8360

    Dimitar
    Participant

    Hello SpaceQuester,

    Please take a look at the forum topic Code Formatting.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.