Cascading dropdown list on jqxToolBar - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: cascading, cascading combobox, cascading dropdown list, cascading dropdownlist, DropDownList, jqxListBox, jqxToolBar, ListBox, Separator, toolbar

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

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

Author

Cascading dropdown list on jqxToolBar Posts

February 25, 2015 at 2:05 am 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 ?

February 25, 2015 at 6:35 am 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/

February 25, 2015 at 7:23 am 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.

February 25, 2015 at 8:11 am Cascading dropdown list on jqxToolBar #67618

Dimitar

Participant

Hi rishisahi,

Please use the property placeHolder instead of promptText.
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/

February 25, 2015 at 8:18 am 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>>

February 25, 2015 at 8:47 am 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`

February 26, 2015 at 6:45 am Cascading dropdown list on jqxToolBar #67699

Dimitar

Participant

Hi rishisahi,

You can add space by insterting “|” (separator) in the tools definition, e.g.: tools: 'button | button | button'
Static text is also a custom tool in jqxToolBar.

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/

February 26, 2015 at 7:28 am 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 ?

February 27, 2015 at 8:07 am 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/

March 2, 2015 at 6:32 am Cascading dropdown list on jqxToolBar #67860

rishisahi

Participant

Hi Dimitar,

My IE version is 9.0.8112.

March 2, 2015 at 6:34 am Cascading dropdown list on jqxToolBar #67861

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.

March 4, 2015 at 6:48 am Cascading dropdown list on jqxToolBar #67978

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/

Author

Posts

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

You must be logged in to reply to this topic.