jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Cascading dropdown list on jqxToolBar

This topic contains 11 replies, has 2 voices, and was last updated by  Dimitar 9 years, 2 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • Cascading dropdown list on jqxToolBar #67601

    rishisahi
    Participant

    Hi,

    I have two dropdowns on jqxToolBar and based on selection in one dropdown, I am trying to populate other dropdown but I am ending up populating same first dropdown itself. Here is my code,

    $("#jqxToolBar").jqxToolBar({
                    width: 850, height: 35, tools: 'dropdownlist | dropdownlist | button | button',
                    initTools: function (type, index, tool, menuToolIninitialization) {
                       switch (index) {
                            case 0:
                               var levelsource = <Computed Value>;
                                tool.jqxDropDownList({ width: 150, source: levelsource, promptText: "Select..."});
    	            tool.on("select", function (event)
                                {
                   		 var args = event.args;
    		     if (args) {
    		                     var label = args.item.label;
    			           switch (label) {
                            			case "Project":
    				          tool.jqxDropDownList({ source: <Computed Value> });
                                                                    break;
                                                             }
    		                    }
    	           });
                                break;
                            case 1:
                                var resultsource = <Computed Value>;
                                tool.jqxDropDownList({ width: 150, source: resultsource, promptText: "Select..."});
                                break;                       
                        }
                    }
                });

    note:<computed value> building dynamic source list
    Probably when I use tool.jqxDropDownList() it’s referring to same dropdown. How could I take handle of other objects which are placed on jqxToolBar ?

    • This topic was modified 9 years, 3 months ago by  rishisahi.
    • This topic was modified 9 years, 3 months ago by  rishisahi.
    • This topic was modified 9 years, 3 months ago by  rishisahi.
    Cascading dropdown list on jqxToolBar #67611

    Dimitar
    Participant

    Hello rishisahi,

    Here is how to create cascading dropdownlists in jqxToolBar:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
        <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="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var countries = ['Japan', 'UK'];
                var JapCities = ['Kobe', 'Kyoto', 'Tokyo'];
                var UKCities = ['Brighton', 'Glasgow', 'London'];
    
                var dropdownlist1, dropdownlist1Min, dropdownlist2, dropdownlist2Min;
    
                $("#jqxToolBar").jqxToolBar({
                    width: 850,
                    height: 35,
                    tools: 'dropdownlist | dropdownlist',
                    initTools: function (type, index, tool, menuToolIninitialization) {
                        switch (index) {
                            case 0:
                                tool.jqxDropDownList({
                                    width: 150,
                                    source: countries,
                                    promptText: "Select..."
                                });
    
                                if (menuToolIninitialization === false) {
                                    dropdownlist1 = tool;
                                } else {
                                    dropdownlist1Min = tool;
                                }
                                break;
                            case 1:
                                tool.jqxDropDownList({
                                    width: 150,
                                    source: [],
                                    promptText: "Select..."
                                });
    
                                if (menuToolIninitialization === false) {
                                    dropdownlist2 = tool;
                                } else {
                                    dropdownlist2Min = tool;
                                }
                                break;
                        }
                    }
                });
    
                dropdownlist1.add(dropdownlist1Min).on('select', function (event) {
                    var country = event.args.item.label;
    
                    if (country === 'Japan') {
                        dropdownlist2.jqxDropDownList({ source: JapCities });
                        dropdownlist2Min.jqxDropDownList({ source: JapCities });
                    } else {
                        dropdownlist2.jqxDropDownList({ source: UKCities });
                        dropdownlist2Min.jqxDropDownList({ source: UKCities });
                    }
                });
            });     
        </script>
    </head>
    <body>
        <div id="jqxToolBar">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Cascading dropdown list on jqxToolBar #67614

    rishisahi
    Participant

    Perfect! Thanks Dimitar.
    However I am noticing something very strange with the dropdown list promptText it is showing what I am not using at all. For now I am using “Select…” but it’s showing “Please choose” which I was using yesterday. I tried clearing cache but still it shows the wrong one.

    Another question I have could I use ListBox on jqxToolBar ? I have tried but it throws an error.

    Cascading dropdown list on jqxToolBar #67618

    Dimitar
    Participant

    Hi rishisahi,

    1. Please use the property placeHolder instead of promptText.
    2. jqxListBox can be used in a toolbar as a ‘custom’ tool, as is the case with the jqxDropDownButton in the demo Tool events.

    Best Regards,
    Dimitar

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

    Cascading dropdown list on jqxToolBar #67619

    rishisahi
    Participant

    Thanks Dimitar ! Few more things I am looking in jqxToolBar but not getting any help in API documentation. For example,

    1- How to add space between buttons on toolbar
    2- how to add static text on toolbar like,

    Country <<Country dropdown list>> City <<City Selection>> <<Button1>> <Button2> <<More options>>

    Cascading dropdown list on jqxToolBar #67622

    rishisahi
    Participant

    Hi Dimitar,

    I have added ListBox on jqxToolBar but it’s showing different behavior on IE and Firefox. Firefox behavior what I was expecting and it’s same on Chrome too. Any idea why IE is not displaying properly ? Here are the images of the behavior for your ref,

    On Firefox,
    [IMG]http://i60.tinypic.com/2vjse90.jpg[/IMG]

    On IE,
    [IMG]http://i59.tinypic.com/2mrtunq.png[/IMG]

    Following is the code added in the toolbar with “Custom” option,

    `case 4:
    tool.jqxListBox({ source: listSource, width: 200, height: 200, checkboxes: true });
    break`

    Cascading dropdown list on jqxToolBar #67699

    Dimitar
    Participant

    Hi rishisahi,

    1. You can add space by insterting “|” (separator) in the tools definition, e.g.: tools: 'button | button | button'
    2. Static text is also a custom tool in jqxToolBar.
    3. Make sure the listbox overflows the toolbar’s width in all browsers (sometimes, there are slight differences in their calculations), as in the following example:
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
          <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">
              $(document).ready(function () {
                  $("#jqxToolBar").jqxToolBar({ width: 600, height: 35, tools: "button | dropdownlist combobox | input | custom | custom",
                      initTools: function (type, index, tool, menuToolIninitialization) {
                          switch (index) {
                              case 0:
                                  tool.text("Button");
                                  break;
                              case 1:
                                  tool.jqxDropDownList({ width: 130, source: ["Affogato", "Breve", "Café Crema"], selectedIndex: 1 });
                                  break;
                              case 2:
                                  tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                                  break;
                              case 3:
                                  tool.jqxInput({ width: 200, placeHolder: "Type here..." });
                                  break;
                              case 4:
                                  tool.text('Custom text');
                                  break;
                              case 5:
                                  tool.jqxListBox({ source: ['Item 1', 'Item 2', 'Item 3'], width: '100%', height: 200 });
                                  break;
                          }
                      }
                  });
              });
          </script>
      </head>
      <body>
          <div id="jqxToolBar">
          </div>
      </body>
      </html>

    Best Regards,
    Dimitar

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

    Cascading dropdown list on jqxToolBar #67711

    rishisahi
    Participant

    Thank Dimitar but still I see strange behavior,

    On firefox when I click the icon on tool bar it drops the list box

    [IMG]http://i61.tinypic.com/123sbp1.png[/IMG]

    But on IE nothing happens when I click on the icon,

    [IMG]http://i61.tinypic.com/2mqnpms.png[/IMG]

    Also, Why does the grid styles are so smooth (like rounded corner ) on Firefox but it is not as good on IE ?

    Cascading dropdown list on jqxToolBar #67783

    Dimitar
    Participant

    Hi rishisahi,

    Please share your toolbar initialization code, so that we can determine if there is an issue with it. As for rounded corners, they are only supported in Internet Explorer 9 and above.

    Best Regards,
    Dimitar

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


    rishisahi
    Participant

    Hi Dimitar,

    My IE version is 9.0.8112.


    rishisahi
    Participant

    I have posted my form code in another thread about adding function in toolbar button. Still my listbox doesn’t come up when clicking icon on toolbar.


    Dimitar
    Participant

    Hi rishisahi,

    We tested the following version of your code (with local sources for the dropdownlist and listbox) and it works perfectly fine on Internet Explorer 9 version 9.0.8112 (screenshot):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
        <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="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var listSource = ['a', 'b', 'c'];
    
                var dropdownlist1, dropdownlist1Min, dropdownlist2, dropdownlist2Min, listbox, listboxMin, button1, buttonMin1, button2, buttonMin2;
    
                $("#jqxToolBar").jqxToolBar({
                    width: 850, height: 35, tools: 'custom | dropdownlist | custom | dropdownlist | custom | button | button | custom',
                    initTools: function (type, index, tool, menuToolIninitialization) {
                        switch (index) {
                            case 0:
                                tool.append("<div style='font-weight: bold;padding: 3px;'>Select Level :</div>");
                                break;
                            case 1:
                                var levelsource = ['A', 'B', 'C'];
                                tool.jqxDropDownList({ width: 150, source: levelsource, placeHolder: "Select..." });
                                if (menuToolIninitialization === false) {
                                    dropdownlist1 = tool;
                                } else {
                                    dropdownlist1Min = tool;
                                }
                                break;
                            case 2:
                                tool.append("<div style='font-weight: bold;padding: 3px;'>Select :</div>");
                                break;
                                tool.append("<div style='padding: 3px;'></div>");
                                //                       tool.append("<div style='font-weight: bold;'>Select</div>");      
                                //                           dropdownlist1.add(dropdownlist1Min).on('select', function (event) {      
                                //	           tool.append("<div style='font-weight: bold;'>Select "+event.args.item.label+"</div>");      
                                //	          });      
                                break;
                            case 3:
                                var resultsource = 'Computed Value';
                                tool.jqxDropDownList({ width: 150, source: [], placeHolder: "Select..." });
                                if (menuToolIninitialization === false) {
                                    dropdownlist2 = tool;
                                } else {
                                    dropdownlist2Min = tool;
                                }
                                break;
                            case 4:
                                tool.append("<div style='padding: 10px;'></div>");
                                break;
                            case 5:
                                tool.jqxButton({ width: '120' });
                                tool.text("Apply filter");
                                if (menuToolIninitialization === false) {
                                    button1 = tool;
                                } else {
                                    buttonMin1 = tool;
                                }
                                break;
                            case 6:
                                tool.jqxButton({ width: '120' });
                                tool.text("Clear filter");
                                tool.click(function () {
                                    $("#jqxgrid").jqxGrid('clearfilters');
                                    //event.preventDefault();
                                });
                                break;
                            case 7:
                                tool.jqxListBox({ source: listSource, width: '100%', height: 300, checkboxes: true });
                                if (menuToolIninitialization === false) {
                                    listbox = tool;
                                } else {
                                    listboxMin = tool;
                                }
                                break;
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="jqxToolBar">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.