Pressing tab key causes checkbox selected in 'checkbox' selectionmode. - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: automatically, checkbox, clicked, grid, jqxGrid ;, press, tab

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

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

Author

Pressing tab key causes checkbox selected in 'checkbox' selectionmode. Posts

January 22, 2018 at 7:54 am Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #98350

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.

January 22, 2018 at 3:23 pm Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #98364

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/

February 19, 2018 at 4:26 am Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #98778

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

February 21, 2018 at 10:51 am Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #98840

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/

February 17, 2020 at 5:18 pm Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #108126

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.

February 24, 2020 at 10:40 am Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #108189

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

February 24, 2020 at 10:46 am Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #108190

sunnysingh

Participant

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

February 24, 2020 at 12:09 pm Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #108193

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

February 25, 2020 at 10:33 am Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #108210

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

February 26, 2020 at 2:52 pm Pressing tab key causes checkbox selected in 'checkbox' selectionmode. #108230

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

Author

Posts

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

You must be logged in to reply to this topic.