jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Store more values in results

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 11 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Store more values in results #30417

    realtek
    Participant

    Hi,

    I have a navigationBar which is bound to a JSON datasource.

    Is it possible to store my own attributes rather than just name and value for each item?

    So if I have a JSON that returns Name, Value and SomethingElse, could that SomethingElse be assigned to the item in the navigationBar?

    The same also goes for any other JQX controls really.

    Thanks

    Store more values in results #30422

    Dimitar
    Participant

    Hello realtek,

    You can create a navigation bar from an HTML structure. Binding to JSON is not supported. Please check out the jqxNavigationBar demo section for some examples.

    Best Regards,
    Dimitar

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

    Store more values in results #30492

    realtek
    Participant

    Hi Dimitar,

    Apologies for this, you are correct. I actually had a ListBox inside it which I was binding to JSON so my mistake!

    Can what i’m asking be done on a listbox? Can you retrive different data from JSON and store in your own attributes?

    Thanks!

    Store more values in results #30528

    Dimitar
    Participant

    Hi realtek,

    Yes you can access more fields than label and value through the dataAdapter. Here is a modified version of the demo Binding to JSON Data as an example:

    <!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>
    <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.10.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 = "";
    var url = "../sampledata/customers.txt";
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'CompanyName' },
    { name: 'ContactName' },
    { name: 'ContactTitle' }
    ],
    id: 'id',
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    loadComplete: function () {
    // data is loaded.
    }
    }
    );
    // Create a jqxListBox
    $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: theme });
    $("#jqxWidget").on('select', function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    alert(dataAdapter.records[item.index].ContactTitle);
    var valueelement = $("<div></div>");
    valueelement.text("Value: " + item.value);
    var labelelement = $("<div></div>");
    labelelement.text("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/

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

You must be logged in to reply to this topic.