jQuery UI Widgets Forums Grid Pressing tab key causes checkbox selected in 'checkbox' selectionmode.

This topic contains 9 replies, has 5 voices, and was last updated by  Hristo 4 months, 2 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • klien54
    Participant

    Hello,

    I found a strange behavior which has happened since v.5.4.0.
    In selectionmode:’checkbox’ and editable:true options,
    if I press ‘tab’ button in any cell, the first checkbox is automatically clicked.
    Would you check the example below please?

    http://jsfiddle.net/ue2owgjs/

    Thanks in advance for your help.

    Best regards,
    klien54.


    Stanislav
    Participant

    Hello klien54,

    Thank you for this report!
    We will work on a fix as soon as possible.

    Best Regards,
    Stanislav

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


    klien54
    Participant

    Hello Stanislav,

    I’ve checked this issue with your new version 5.6.0, but it is still not working.
    Would you let me know when it will be fixed in your plan?

    Best Regards,
    klien54


    Stanislav
    Participant

    Hello klien54,

    The fix should be out in the very near future.
    We are sorry for this inconvenience.

    Best Regards,
    Stanislav

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


    whaduu
    Participant

    STILL NOT FIXED. and I only found out about it after spending 8 hours converting my custom grids to use the checkbox selection mode and in the process destroying the functionality of keyboard navigation.


    Hristo
    Participant

    Hello whaduu,

    Thank you for the feedback.
    I will check for this in our new system and if this does not exist I will add it.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    sunnysingh
    Participant

    Still not fixed. I am also facing the same issue. Please update me with any solution to this.


    Hristo
    Participant

    Hello sunnysingh,

    It has a created work item for this.
    I would like to suggest one temporary solution that you could try.
    Handling the case when the first row is selected and unselect it.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id="Description">
            This example shows the set the cells and columns alignment.
        </title>
        <meta name="description" content="JavaScript Grid Columns and Cells Alignment" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.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/jqxradiobutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
    
                var data = generatedata(500);
                var source = {
                    localdata: data,
                    datafields: [{
                        name: "firstname",
                        type: "string"
                    }, {
                        name: "lastname",
                        type: "string"
                    }],
                    datatype: "array"
                };
    
                var adapter = new $.jqx.dataAdapter(source);
                var isFirstRowSelected = false;
                var usingTab = false;
                $("#jqxgrid").jqxGrid({
                    width: 600,
                    theme: "energyblue",
                    source: adapter,
                    sortable: true,
                    editable: true,
                    handlekeyboardnavigation: function (event)
                    {
                        console.log(event);
                        if (event.keyCode == 9) {
                            // This is the "Tab" key
                            var selectedrowindexes = $("#jqxgrid").jqxGrid("selectedrowindexes");
                            usingTab = true;
                            if (selectedrowindexes.legnth > 0 && selectedrowindexes.indexOf(0) != -1) {
                                isFirstRowSelected = true
                            }
                        }
                    },
                    ready: function ()
                    {
                        console.log(isFirstRowSelected);
                    },
                    selectionmode: "checkbox",
                    columns: [{
                        text: "First Name",
                        datafield: "firstname"
                    }, {
                        text: "Last Name",
                        datafield: "lastname"
                    }]
                });
                var listSource = [{
                    label: "First Name",
                    value: "firstname",
                    checked: true
                }, {
                    label: "Last Name",
                    value: "lastname",
                    checked: true
                }];
    
                $("#jqxlistbox").jqxListBox({
                    theme: "energyblue",
                    autoHeight: true,
                    source: listSource,
                    width: 200,
                    checkboxes: true
                });
                $("#jqxlistbox").on("checkChange", function (event)
                {
                    $("#jqxgrid").jqxGrid("beginupdate");
                    if (event.args.checked) {
                        $("#jqxgrid").jqxGrid("showcolumn", event.args.value);
                    } else {
                        $("#jqxgrid").jqxGrid("hidecolumn", event.args.value);
                    }
                    $("#jqxgrid").jqxGrid("endupdate");
                });
    
                $("#jqxgrid").on("rowselect", function (event)
                {
                    // event arguments.
                    var args = event.args;
                    // row"s bound index.
                    var rowBoundIndex = args.rowindex;
                    // row"s data. The row"s data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row"s firstName, use var firstName = rowData.firstName;
                    var rowData = args.row;
                    if (usingTab && rowBoundIndex == 0) {
                        var selectedrowindexes = $("#jqxgrid").jqxGrid("selectedrowindexes");
                        var index = $("#jqxgrid").jqxGrid("getrowboundindex", 0);
                        $("#jqxgrid").jqxGrid("unselectrow", index);
                    }
                });
    
            });
        </script>
    </head>
    <body>
        <div id="jqxgrid"></div>Show/Hide Columns
        <div id="jqxlistbox"></div>
    </body>
    </html>
    

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    sunnysingh
    Participant

    Hi Hristo,

    Thanks for your reply.

    I am using an angular version of jqxGrid and I called handlekeyboardnavigation function from angular, then my grid is undefined in the below-mentioed line inside this function.

    var selectedrowindexes = this.myGrid.getselectedrowindexes();

    please help and share the code for angular typescript.

    Thanks


    Hristo
    Participant

    Hello sunnysingh,

    I check and the work item is still valid.
    Please, take a look at this example:
    https://stackblitz.com/edit/github-gcvhq6
    I would like to mention that this is a workaround that is transformed from JavaScript to an Angular example.
    I saw that it needs from fine settings – as it should handle the case where the first checkbox is checked.
    Thank you for your understanding.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.