jQWidgets Forums

Tagged: DropDownList, jqxDropDownList, multiple dropdownlist selection

This topic contains 5 replies, has 2 voices, and was last updated by anilsaxena 12 years, 8 months ago.

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

Author

Load from Select with Checkboxes broken in 2.5 Posts

November 9, 2012 at 5:56 am Load from Select with Checkboxes broken in 2.5 #10754

Member

It used to work fine in 2.4.2 but not working in version 2.5, I have made some changes in jqxdropdownlist/loadfromselect.htm to test it.
Here is code of demo file I am using:

<!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>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxDropDownList can be populated with data from an existing
        select element making it easier to upgrade your pages using jqxDropDownList."/>
    <title id='Description'>The jqxDropDownList can be populated with data from an existing
        select element making it easier to upgrade your pages using jqxDropDownList.</title>
    <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.8.2.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>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // Create a jqxDropDownList
                $("#jqxDropDownList").jqxDropDownList({ checkboxes: true, multiple: true, width: '200px', height: '25px', theme: theme });
                // Load the data from the Select html element.
                $("#jqxDropDownList").jqxDropDownList('loadFromSelect', 'select');
              
                // updates the select's selection.
                $("#jqxDropDownList").bind('select', function (event) {
                    if (event.args) {
                        var args = event.args;
                        // select the item in the 'select' tag.
                        var index = args.item.index;
                        $("#select").find('option').eq(index).attr("selected", "true");
                    }
                });
                // updates the dropdownlist's selection.
                $("#select").bind('change', function (event) {
                    var index = $("#select")[0].selectedIndex;
                    $("#jqxDropDownList").jqxDropDownList('selectIndex', index);
                    $("#jqxDropDownList").jqxDropDownList('ensureVisible', index);
                });
                // selects the first item.
                $("#jqxDropDownList").jqxDropDownList('selectedIndex', '0');
            });
        </script>
        <div style='float: left; width: 500px;' id='jqxWidget'>
            <div style='float: left;' id='jqxDropDownList'>
            </div>
            <div style='float: left;'>
                <select style='height: 50px; width: 200px; margin-left: 30px;' id='select' multiple=true>
                    <option>Affogato</option>
                    <option>Americano</option>
                    <option>Bicerin</option>
                    <option>Breve</option>
                    <option>Café Bombón</option>
                    <option>Caffé Corretto</option>
                    <option>Café Crema</option>
                    <option>Caffé Latte</option>
                    <option>Caffé macchiato</option>
                    <option>Café mélange</option>
                    <option>Coffee milk</option>
                    <option>Cafe mocha</option>
                    <option>Cappuccino</option>
                    <option>Carajillo</option>
                    <option>Cuban espresso</option>
                    <option>Espresso</option>
                    <option>The Flat White</option>
                    <option>Frappuccino</option>
                    <option>Galao</option>
                    <option>Greek frappé coffee</option>
                    <option>Iced Coffee</option>
                    <option>Indian filter coffee</option>
                    <option>Instant coffee</option>
                    <option>Irish coffee</option>
                    <option>Liqueur coffee</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>

November 9, 2012 at 6:04 am Load from Select with Checkboxes broken in 2.5 #10756

Peter Stoev

Keymaster

Hi anilsaxena,

jqxDropDownList does not support multiple selection. However, it supports checkboxes. To check item, use the checkIndex method. In the previous versions, checked items were selected, but not anymore.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 9, 2012 at 6:08 am Load from Select with Checkboxes broken in 2.5 #10757

anilsaxena

Member

I have removed the selection part from it, but it is not showing checkboxes at all.

November 9, 2012 at 6:10 am Load from Select with Checkboxes broken in 2.5 #10758

Peter Stoev

Keymaster

Hi anilsaxena,

The following sample shows how to use jqxDropDownList with Checkboxes: checkboxes.htm. Also note, that the jqxcheckbox.js should be included.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 9, 2012 at 6:12 am Load from Select with Checkboxes broken in 2.5 #10759

Peter Stoev

Keymaster

Hi anilsaxena,

Example code:

<!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.8.2.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/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // Create a jqxDropDownList
                $("#jqxDropDownList").jqxDropDownList({ width: '200px', height: '25px', theme: theme });
                // Load the data from the Select html element.
                $("#jqxDropDownList").jqxDropDownList('loadFromSelect', 'select');
                $("#jqxDropDownList").jqxDropDownList({ checkboxes: true });
                // updates the select's selection.
                $("#jqxDropDownList").bind('select', function (event) {
                    if (event.args) {
                        var args = event.args;
                        // select the item in the 'select' tag.
                        var index = args.item.index;
                        $("#select").find('option').eq(index).attr("selected", "true");
                    }
                });
                // updates the dropdownlist's selection.
                $("#select").bind('change', function (event) {
                    var index = $("#select")[0].selectedIndex;
                    $("#jqxDropDownList").jqxDropDownList('selectIndex', index);
                    $("#jqxDropDownList").jqxDropDownList('ensureVisible', index);
                });
                // selects the first item.
                $("#jqxDropDownList").jqxDropDownList('selectedIndex', '0');
            });
        </script>
        <div style='float: left; width: 500px;' id='jqxWidget'>
            <div style='float: left;' id='jqxDropDownList'>
            </div>
            <div style='float: left;'>
                <select style='height: 25px; width: 200px; margin-left: 30px;' id='select'>
                    <option>Affogato</option>
                    <option>Americano</option>
                    <option>Bicerin</option>
                    <option>Breve</option>
                    <option>Café Bombón</option>
                    <option>Caffé Corretto</option>
                    <option>Café Crema</option>
                    <option>Caffé Latte</option>
                    <option>Caffé macchiato</option>
                    <option>Café mélange</option>
                    <option>Coffee milk</option>
                    <option>Cafe mocha</option>
                    <option>Cappuccino</option>
                    <option>Carajillo</option>
                    <option>Cuban espresso</option>
                    <option>Espresso</option>
                    <option>The Flat White</option>
                    <option>Frappuccino</option>
                    <option>Galao</option>
                    <option>Greek frappé coffee</option>
                    <option>Iced Coffee</option>
                    <option>Indian filter coffee</option>
                    <option>Instant coffee</option>
                    <option>Irish coffee</option>
                    <option>Liqueur coffee</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 9, 2012 at 6:17 am Load from Select with Checkboxes broken in 2.5 #10761

anilsaxena

Member

Thanks, I was not making the call:

$(“#jqxDropDownList”).jqxDropDownList({ checkboxes: true });

In earlier version I included checkboxes: true in first call.

Author

Posts

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

You must be logged in to reply to this topic.