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 10 years, 8 months ago.

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



    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.


    Store more values in results #30422


    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,

    jQWidgets team

    Store more values in results #30492


    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?


    Store more values in results #30528


    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">
    <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>
    <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) {
    var valueelement = $("<div></div>");
    valueelement.text("Value: " + item.value);
    var labelelement = $("<div></div>");
    labelelement.text("Label: " + item.label);
    <div id='jqxWidget'>
    <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.