jQWidgets Forums

Tagged: DropDownList, jqxDropDownList, tabindex

This topic contains 12 replies, has 3 voices, and was last updated by basumrinmoy 12 years ago.

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

Author

TabIndex in DropdownList Posts

February 19, 2013 at 6:14 am TabIndex in DropdownList #15443

basumrinmoy

Participant

How to assign tabindex in DropdownList.

February 19, 2013 at 9:55 am TabIndex in DropdownList #15463

Dimitar

Participant

Hello basumrinmoy,

You just have to set the tabindex attribute to the div element from which you initialize the widget, e.g.:

    <div id='jqxDropDownList' tabindex="1">
    </div>

Another possibility is to set it by using jQuery’s .attr() method, e.g.:

            $("#jqxDropDownList").attr("tabindex", "1");

Best Regards,
Dimitar

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

April 2, 2013 at 8:41 am TabIndex in DropdownList #18374

basumrinmoy

Participant

tabindex not working properly either I set

or
$(“#jqxDropDownList”).attr(“tabindex”, “1”);

April 2, 2013 at 9:02 am TabIndex in DropdownList #18376

basumrinmoy

Participant

tabindex not working properly either I set

or
$(“#jqxDropDownList”).attr(“tabindex”, “1″);

April 2, 2013 at 9:04 am TabIndex in DropdownList #18377

basumrinmoy

Participant

tabindex not working properly either I set

<div id='jqxDropDownList' tabindex="1">
    </div>

or
$(“#jqxDropDownList”).attr(“tabindex”, “1″);

April 2, 2013 at 11:29 am TabIndex in DropdownList #18404

Dimitar

Participant

Hi basumrinmoy,

Could you please share the version of jQWidgets you are using?

Best Regards,
Dimitar

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

April 27, 2013 at 11:06 am TabIndex in DropdownList #20131

basumrinmoy

Participant

As you previously suggest me to set tab index for Dropdownlist its working. But when there is also other controls in a page then its not properly work. Actual problem is in a page if control position like
1st is Dropdownlist (tabindex :1)
2nd is Textbox and (tabindex :2)
3rd is again Dropdownlist (tabindex :3)

then tabindex skip from 1st dropdownlist to 2nd dropdown. Please help me to resolve this problem.

April 28, 2013 at 9:21 am TabIndex in DropdownList #20152

basumrinmoy

Participant

I am using latest version.

April 28, 2013 at 11:16 am TabIndex in DropdownList #20153

Peter Stoev

Keymaster

Hi guys,

We are unable to reproduce that with jQWidgets 2.8.1.

Behavior: When Tab is pressed, the first DropDownList is focused, Another Tab focuses the TextBox with tabindex=”2″, the third Tab focuses the second DropDownList as expected.

Working 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>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxDropDownList represents a widget that contains a list of
        selectable items displayed in a drop-down." />
    <title id='Description'>The jqxDropDownList represents a widget that contains a list
        of selectable items displayed in a drop-down.</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.3.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 = getDemoTheme();
                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 });
                $("#jqxWidget2").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25', theme: theme });
            });
        </script>
        <div tabindex="1" id='jqxWidget'>
        </div>
        <input type="text" tabindex="2" />
        <div tabindex="3" id='jqxWidget2'>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

April 29, 2013 at 12:17 pm TabIndex in DropdownList #20228

basumrinmoy

Participant

sorry i am using 2.7.1

April 29, 2013 at 12:18 pm TabIndex in DropdownList #20229

basumrinmoy

Participant

This is my code using version 2.7.1 but I have facing same issue still now. I am sending you the demo code .

<link rel="stylesheet" href="../../Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var theme = getDemoTheme();
        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 });
        $("#jqxWidget2").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25', theme: theme });
    });
</script>
<input type="text" tabindex="1" />
<div tabindex="2" id='jqxWidget'>
</div>
<input type="text" tabindex="3" />
<div tabindex="4" id='jqxWidget2'>
</div>

April 29, 2013 at 2:23 pm TabIndex in DropdownList #20241

Peter Stoev

Keymaster

Hi basumrinmoy,

The sample we provided and tested is for a newer version. As we are unable to reproduce that issue with the current version, my advice for you is to consider upgrading to a newer version of jQWidgets or at least try it.

Best Regards,
Peter Stoev

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

April 30, 2013 at 5:04 am TabIndex in DropdownList #20285

basumrinmoy

Participant

No Sorry I can’t upgrade now. I want this in version jQWidgets v2.7.0 (2013-Feb-08). So please give me solution for this version.

Author

Posts

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

You must be logged in to reply to this topic.