jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › jqxToolBar jqxCombobox Remote Search
Tagged: Angular toolbar, combobox, jQuery toolbar, jqxComboBox, jqxToolBar, remote search, tool, toolbar
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 8 years, 11 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Hello.
Does jqxToolbar support remote search as demo’ed here?
How should I reference the jqxComboBox? I am using tool.
$("#jqxToolBar").jqxToolBar({ width: "100%", height: 35, tools: 'combobox', initTools: function (type, index, tool, menuToolIninitialization) { switch (index) { case 0: var url = "..."; console.log(url); var sourceComboBox = { datatype: "jsonp", datafields: [{ name: 'id'},{ name: 'name'}], async: false, url: url }; var dataAdapterComboBox = new $.jqx.dataAdapter(sourceComboBox); tool.jqxComboBox({ source: dataAdapterComboBox, width: 200, height: 23, displayMember: 'name', valueMember: 'id' }); tool.jqxComboBox({ width: 100, height: 25, source: dataAdapter, remoteAutoComplete: true, autoDropDownHeight: true, selectedIndex: 0, displayMember: "name", valueMember: "id", renderer: function (index, label, value) { console.log("label="+label); var item = dataAdapter.records[index]; if (item != null) { var label = item.name; return label; } return ""; }, renderSelectedItem: function(index, item) { console.log("item="+item); var item = dataAdapter.records[index]; if (item != null) { var label = item.name; return label; } return ""; }, search: function (searchString) { dataAdapter.dataBind(); } }); break; });<div id="jqxToolBar"></div>Hello jqwidgetsdev,
The following example shows how to display the combobox from the demo Remote Search in jqxToolBar. Please take a look at it:
<!DOCTYPE html> <html lang="en"> <head> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxToolBar").jqxToolBar({ width: 800, height: 35, tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom', initTools: function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = $("<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass("jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr("title", "Bold"); tool.append(icon); break; case 1: icon.addClass("jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr("title", "Italic"); tool.append(icon); break; case 2: icon.addClass("jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr("title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text("Enabled"); tool.on("click", function () { var toggled = tool.jqxToggleButton("toggled"); if (toggled) { tool.text("Enabled"); } else { tool.text("Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: var source = { datatype: "jsonp", datafields: [ { name: 'countryName' }, { name: 'name' }, { name: 'population', type: 'float' }, { name: 'continentCode' }, { name: 'adminName1' } ], url: "http://api.geonames.org/searchJSON", data: { featureClass: "P", style: "full", maxRows: 12, username: "jqwidgets" } }; var dataAdapter = new $.jqx.dataAdapter(source, { formatData: function (data) { if (tool.jqxComboBox('searchString') != undefined) { data.name_startsWith = tool.jqxComboBox('searchString'); return data; } } } ); tool.jqxComboBox( { width: 250, source: dataAdapter, remoteAutoComplete: true, autoDropDownHeight: true, selectedIndex: 0, displayMember: "name", valueMember: "countryName", renderer: function (index, label, value) { var item = dataAdapter.records[index]; if (item != null) { var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")"; return label; } return ""; }, renderSelectedItem: function (index, item) { var item = dataAdapter.records[index]; if (item != null) { var label = item.name; return label; } return ""; }, search: function (searchString) { dataAdapter.dataBind(); } }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: var button = $("<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } }); }); </script> </head> <body> <div id="jqxToolBar"> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.