jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Store more values in results
Tagged: data adapter, dataadapter, jqxListBox, jqxnavigationbar, json, label, ListBox, name, navigationbar, source, value
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 1 month ago.
-
Author
-
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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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!
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.