jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar jqxToolBar jqxCombobox Remote Search

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxToolBar jqxCombobox Remote Search #80155

    jqwidgetsdev
    Participant

    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>

    jqxToolBar jqxCombobox Remote Search #80220

    Dimitar
    Participant

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

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

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

You must be logged in to reply to this topic.