disable theme dosen't applay

[ahmed.assafMember]

Dears,
I have an issue,

there is 7 drop down and only last one has class disabled and the other 6 drop down when disabled it disabled but doesn’t take the disable effect “theme”.

this is my resource

<script src="JSResources/jqxcore.js" type="text/javascript"></script>
    <script src="JSResources/DropDown/jqxbuttons.js" type="text/javascript"></script>
    <script src="JSResources/DropDown/jqxlistbox.js" type="text/javascript"></script>
    <script src="JSResources/DropDown/jqxscrollbar.js" type="text/javascript"></script>
    <script src="JSResources/DropDown/jqxdropdownlist.js" type="text/javascript"></script>
    <script src="JSResources/gettheme.js" type="text/javascript"> </script>

this my function

function loadDropDowns() {
                    var today = new Date();
                    var DayNow = 1;
                    var MonthNow = 6;
                    var YearNow = today.getFullYear();
                    var source1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];                // Create a jqxDropDownList           
                    if (source1.length >= 8) {
                        var hieght = 200;
                    }
                    else {
                        var hieght = source1.length * 25;
                    }
                    $("#day").jqxDropDownList({ source: source1, selectedIndex: GetIndexOfAnElement(source1, DayNow), width: '50', height: '25'});
                    var source2 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];                // Create a jqxDropDownList           
                    if (source2.length >= 8) {
                        var hieght = 200;
                    }
                    else {
                        var hieght = source2.length * 25;
                    }
                    $("#month").jqxDropDownList({ source: source2, selectedIndex: GetIndexOfAnElement(source2, MonthNow), width: '100', height: '25'});
                    var source3 = ["2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];                // Create a jqxDropDownList           
                    if (source3.length >= 8) {
                        var hieght = 200;
                    }
                    else {
                        var hieght = source3.length * 25;
                    }
                    $("#year").jqxDropDownList({ source: source3, selectedIndex: GetIndexOfAnElement(source3, YearNow), width: '100', height: '25' });
                    var source4 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];                // Create a jqxDropDownList           
                    if (source4.length >= 8) {
                        var hieght = 200;
                    }
                    else {
                        var hieght = source4.length * 25;
                    }
                    $("#dayto").jqxDropDownList({ source: source4, selectedIndex: GetIndexOfAnElement(source4,  "1"), width: '50', height: '25' });
                    var source5 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];                // Create a jqxDropDownList           
                    if (source5.length >= 8) {
                        var hieght = 200;
                    }
                    else {
                        var hieght = source5.length * 25;
                    }
                    $("#monthto").jqxDropDownList({ source: source5, selectedIndex: GetIndexOfAnElement(source5, "7"), width: '100', height: '25' });
                    var source6 = ["2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];                // Create a jqxDropDownList           
                    if (source6.length >= 8) {
                        var hieght = 200;
                    }
                    else {
                        var hieght = source6.length * 25;
                    }
                    $("#yearto").jqxDropDownList({ source: source6, selectedIndex: GetIndexOfAnElement(source6, YearNow), width: '100', height: '25'});
                    var source7 = ["15", "20", "25", "30", "35", "40", "45", "50", "55", "60", "65", "70", "75", "80", "85", "90", "95", "100"];                // Create a jqxDropDownList           
                    if (source7.length >= 8) {
                        var hieght = 200;
                    }
                    else {
                        var hieght = source7.length * 25;
                    }
                    $("#DayCount").jqxDropDownList({ source: source7, selectedIndex: 0, width: '50', height: '25' });
                }

• This topic was modified 10 years, 10 months ago by  ahmed.assaf. Reason: format HTML

[Peter StoevKeymaster]

Hi Ahmed,

Could you please send the code that disables the DropDownList, too?

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ahmed.assafMember]

Hi Peter,
There is to function one to disable and the other to enable

 function enablelast() {
                    $("#day").jqxDropDownList({ disabled: true });
                    $("#month").jqxDropDownList({ disabled: true });
                    $("#year").jqxDropDownList({ disabled: true });
                    $("#dayto").jqxDropDownList({ disabled: true });
                    $("#monthto").jqxDropDownList({ disabled: true });
                    $("#yearto").jqxDropDownList({ disabled: true });
                    $("#DayCount").jqxDropDownList({ disabled: false });
                }
                function enableDayRange() { 
                    $("#day").jqxDropDownList({ disabled: false });
                    $("#month").jqxDropDownList({ disabled: false });
                    $("#year").jqxDropDownList({ disabled: false });
                    $("#dayto").jqxDropDownList({ disabled: false });
                    $("#monthto").jqxDropDownList({ disabled: false });
                    $("#yearto").jqxDropDownList({ disabled: false });
                    $("#DayCount").jqxDropDownList({ disabled: true });
                }

[Peter StoevKeymaster]

Hi Ahmed,

Which version of jQWidgets do you use?

I’ve tried to reproduce it with a small sample which dynamically disables a DropDownList, too. The result is that the jqxDropDownList is disabled and the disabled UI style is displayed, too.

Here’s my sample:

<!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.7.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 = '';
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
                // Create a jqxDropDownList
                $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25', theme: theme });
				$("#jqxWidget").jqxDropDownList({disabled: true});
		 });
        </script>
		<div id='jqxWidget'>
    
       </div>
     </div>
</body>
</html>

I’ve tested that with the latest version of jQWidgets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ahmed.assafMember]

Hi Peter,

Could you please use more than one drop down like 3 or 4 and try to disable 3 and enable one.

[Peter StoevKeymaster]

Hi Ahmed,

I’ve tested it with 5 DropDownLists and I confirm the issue. I would like to thank you for the provided feedback. The issue is is caused due to the notification about the dynamically changing of the disabled property. A temporary solution is to manually add these classes ‘jqx-fill-state-disabled’ and ‘jqx-dropdownlist-state-disabled’ to the disabled dropdownlists. The issue will be resolved in the next release which will be available in the second half of this month.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts