jQWidgets Forums

Tagged: auto-highlighting, combobox, jqxComboBox, multiselect

This topic contains 5 replies, has 2 voices, and was last updated by Nadezhda 10 years ago.

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

Author

First item auto highlighted with multiSelect Posts

March 18, 2015 at 9:05 am First item auto highlighted with multiSelect #68799

stevem

Participant

Hello,

is there a way to disable the “auto-highlighting” of the first item in a comboBox when the multiSelect property is set to true?
If multiSelect is disabled the first item will not get automatically highlighted which is what we are after.

Example:

HTML:
<div id='jqxComboBox'></div>

JS:

  var source = [
        "Affogato",
        "Americano",
        "Bicerin"
    ];
 // Create a jqxComboBox
  $("#jqxComboBox").jqxComboBox({
     source: source,
     width: '200px',
     height: '25px',
     multiSelect: true
 });

Regards,
Steve

March 18, 2015 at 1:14 pm First item auto highlighted with multiSelect #68823

Nadezhda

Participant

Hello Steve,

In the following example you can find how to take out the highlight from the first item: http://jsfiddle.net/m756gzuq/.

Best Regards,
Nadezhda

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

March 19, 2015 at 9:15 am First item auto highlighted with multiSelect #68842

stevem

Participant

Hi Nadezhda,

thanks for the quick reply. While “overriding” the .jqx-fill-state-pressed style in your example solves the initial highlight to disappear it unfortunately also causes the first item to no longer highlight on hover.
It looks like the “problem” is that the first item in the combobox gets the “jqx-fill-state-pressed” style set automatically (next to some other properties, also “aria-selected=true” on the parent div) even though nothing should be really marked as selected when you start with a new combobox.

Could you provide an alternative solution please ? (which keeps the hover over highlighting behaviour functional)

Regards,
Steve

March 19, 2015 at 11:11 am First item auto highlighted with multiSelect #68851

Nadezhda

Participant

Hi Steve,

Please, find the following example which contains possible solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/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/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {               
                var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");

                // Create a jqxComboBox
                $("#jqxComboBox").jqxComboBox({
                    source: countries,
                    multiSelect: true,
                    width: 350,
                    height: 25,
                });
                $('#jqxComboBox').on('open', function (event) {
                    $("span").removeClass("jqx-listitem-state-selected");
                    $("span").removeClass("jqx-fill-state-pressed"); 
                });
            });
        </script>
        <span style="font-size: 13px; font-family: Verdana;">Select countries</span>
         <div style="margin-top: 5px;" id='jqxComboBox'>
         </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

March 19, 2015 at 4:29 pm First item auto highlighted with multiSelect #68861

stevem

Participant

Thanks a lot Nadezhda,

while that works it would be great if either the default behaviour would already achieve this so one does not have to do it manually or if there could be a property like “firstItemHighlighted: false” for the combobox. Is it feasible to ask for that property/behaviour for the next jqWidgets version ?

Regards,
Steve

March 20, 2015 at 6:59 am First item auto highlighted with multiSelect #68879

Nadezhda

Participant

Hi Steve,

We do not plan to develop such a property about this particular widget but we will consider implementing this feature in future versions.

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.