jQWidgets Forums

jQuery UI Widgets Forums Lists DropDownList Tabbing across dropdownlist in grid

This topic contains 3 replies, has 2 voices, and was last updated by  ivailo 9 years, 12 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Tabbing across dropdownlist in grid #73724

    joelk
    Participant

    Hi–

    I’ve got a grid column defined as dropdownlist.
    The dropdown appears to work correctly, however if I use the tab key to navigate across a grid row, the dropdown selection is wiped out.

    That is, left-to-right I have a number column, a text column, a dropdownlist column, and a checkbox column. If my cursor is in the number column, and I tab right…
    1) When the cursor reaches the dropdownlist column, even though there was a value showing, the list switches to “Please Choose:”
    2) And if I tab again, the dropdown column is left empty

    How do I prevent this? Other libs which provide this functionality (e.g. jsgrid) do not disturb the menu selection if user tabs across them–that is the desired behavior.

    Thanks

    Tabbing across dropdownlist in grid #73741

    ivailo
    Participant

    hi joelk,

    Send a fiddle with your actual code for better analyze of the problem.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Tabbing across dropdownlist in grid #73777

    joelk
    Participant

    Well, here’s an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        
        <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/jqxdata.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/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript">
             $(document).ready(function () {
                    var tableData = [
                        {
                            "ID": 100,
                            "Name": "Type A",
                            "Data Type": "UINT8",
                            "Read": true,
                            "Write": true
                        },
                        {
                            "ID": 101,
                            "Name": "Type B",
                            "Data Type": "UINT16",
                            "Read": false,
                            "Write": true
                        },
                        {
                            "ID": 102,
                            "Name": "Type C",
                            "Data Type": "UINT32",
                            "Read": true,
                            "Write": false
                        },
                        {
                            "ID": 103,
                            "Name": "Type D",
                            "Data Type": "UINT8",
                            "Read": true,
                            "Write": true
                        }
    
                    ];
    
                    var menuData = [
                        {"label": "UINT8", "value": "UINT8"},
                        {"label": "UINT16", "value": "UINT16"},
                        {"label": "UINT32", "value": "UINT32"},
                        {"label": "SINT8", "value": "SINT8"},
                        {"label": "SINT16", "value": "SINT16"},
                        {"label": "SINT32", "value": "SINT32"},
                        {"label": "FLOAT32", "value": "FLOAT32"},
                        {"label": "FLOAT64", "value": "FLOAT64"},
                        {"label": "BOOLEAN", "value": "BOOLEAN"},
                        {"label": "UTF8S", "value": "UTF8S"}
                    ];
    
                    var menuSource = {
                        datatype: "json",
                        datafields: [
                            { name: 'label', type: 'string' },
                            { name: 'value', type: 'string' }
                        ],
                        localdata: menuData
                    };
    
                    var menuDataAdapter = new $.jqx.dataAdapter(menuSource);
    
                    var source = {
                        datatype: "json",
                        datafields: [
                                { name: 'ID'},
                                { name: 'Name'},
                                { name: 'Data Type'},
                                { name: 'Read'},
                                { name: 'Write'}
                            ],
                        localdata: tableData,
                    };
    
                    var tableDataAdapter = new $.jqx.dataAdapter(source);
    
                    $("#jqxgrid").jqxGrid({
                            columns: [
                                { text: 'ID', datafield: 'ID', columntype: 'numberInput'},
                                { text: 'Name', datafield: 'Name', columntype: 'textbox'},
                                { text: 'Data Type', datafield: 'Data Type', columntype: 'dropdownlist',
                                    initeditor: function (row, cellvalue, editor) {
                                        editor.jqxDropDownList({displayMember: 'label', valueMember: 'value', source: menuDataAdapter});
                                    }
                                },
                                { text: 'Read', datafield: 'Read', columntype: 'checkbox'},
                                { text: 'Write', datafield: 'Write', columntype: 'checkbox'}
                            ],
                            editable: true,
                            sortable: true,
                            sorttogglestates: 2,
                            source: tableDataAdapter,
                            showsortmenuitems: false,
                            width: 750,
                            autoheight: true
                        });
    
                });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid"></div>
    </body>
    </html>
    
    Tabbing across dropdownlist in grid #73808

    ivailo
    Participant

    Hi joelk,

    In this code when you select jqxDropDownList it changes the selected value to default value “”. This happens on click, tab, etc.
    To prevent that behavior you have to add cellvaluechanging: function (){…}. In your case this will prevent emptying of the cell.

    Here is the javascript demo.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.