Turn off "type to edit" feature - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, disable editing on keypress, disable type to edit, grid, handlekeyboardnavigation, jquery grid, jqxgrid, key, keyboard

This topic contains 5 replies, has 2 voices, and was last updated by sirstruck 8 years, 8 months ago.

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

Author

Turn off "type to edit" feature Posts

April 4, 2016 at 4:13 pm Turn off "type to edit" feature #83115

sirstruck

Participant

Hi, when the user has a cell selected and begins to type on the keyboard, the selected cell enters editing mode and begins to accept the keystrokes as input. Is there any way to turn this off?

Thanks,

David

April 5, 2016 at 5:01 am Turn off "type to edit" feature #83128

Dimitar

Participant

Hi David,

This can be achieved if you implement the callback function handlekeyboardnavigation as follows:

<!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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var url = '../sampledata/nasdaq_vs_sp500.txt';

            var source = {
                datatype: "csv",
                datafields: [{
                    name: 'Date',
                    type: 'date'
                }, {
                    name: 'S&P 500',
                    type: 'float'
                }, {
                    name: 'NASDAQ',
                    type: 'float'
                }],
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid({
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                ready: function ()
                {
                    $("#jqxgrid").jqxGrid('focus');
                },
                editmode: 'selectedcell',
                selectionmode: 'singlecell',
                handlekeyboardnavigation: function (event)
                {
                    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                    if (key >= 48 && key <= 57 || key >= 65 && key <= 90)
                    {
                        return true;
                    }
                },
                columns: [{
                    text: 'Date',
                    datafield: 'Date',
                    cellsformat: 'D',
                    width: 250
                }, {
                    text: 'S&P 500',
                    datafield: 'S&P 500',
                    width: 300,
                    cellsformat: 'f'
                }, {
                    text: 'NASDAQ',
                    datafield: 'NASDAQ',
                    cellsformat: 'f'
                }]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 5, 2016 at 4:07 pm Turn off "type to edit" feature #83149

sirstruck

Participant

This works great — thanks, Dimitar!

April 6, 2016 at 1:57 pm Turn off "type to edit" feature #83202

sirstruck

Participant

Oops, I spoke too soon. We noticed a couple of issues with this code change. First, it prevents the user from editing grid cell values using the keyboard. Not only that, it also prevents edits to other fields in the same webpage, e.g. text fields. Dimitar, is there another way to do this?

Thanks,

David

April 7, 2016 at 6:24 am Turn off "type to edit" feature #83219

Dimitar

Participant

Hi David,

I am sorry for providing an incomplete solution. Please try the following modification that should work fine:

<!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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var url = '../sampledata/nasdaq_vs_sp500.txt';

            var source = {
                datatype: "csv",
                datafields: [{
                    name: 'Date',
                    type: 'date'
                }, {
                    name: 'S&P 500',
                    type: 'float'
                }, {
                    name: 'NASDAQ',
                    type: 'float'
                }],
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            var editMode = false;

            $("#jqxgrid").jqxGrid({
                width: 850,
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                ready: function ()
                {
                    $("#jqxgrid").jqxGrid('focus');
                },
                editmode: 'selectedcell',
                selectionmode: 'singlecell',
                handlekeyboardnavigation: function (event)
                {
                    if ((event.target.id === 'jqxgrid' || $("#jqxgrid").has($(event.target)).length > 0) && editMode === false)
                    {
                        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                        if (key >= 48 && key <= 57 || key >= 65 && key <= 90)
                        {
                            return true;
                        }
                    }
                },
                columns: [{
                    text: 'Date',
                    datafield: 'Date',
                    cellsformat: 'D',
                    width: 250
                }, {
                    text: 'S&P 500',
                    datafield: 'S&P 500',
                    width: 300,
                    cellsformat: 'f'
                }, {
                    text: 'NASDAQ',
                    datafield: 'NASDAQ',
                    cellsformat: 'f'
                }]
            });

            $("#jqxgrid").on('cellbeginedit', function (event)
            {
                editMode = true;
            });

            $("#jqxgrid").on('cellendedit', function (event)
            {
                editMode = false;
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
    <br />
    <input type="text" />
</body>
</html>

Best Regards,
Dimitar

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

April 8, 2016 at 7:20 pm Turn off "type to edit" feature #83302

sirstruck

Participant

Thanks, Dimitar, this does indeed work. And, in case anyone comes across this code, I wanted to clarify what you’re doing. To prevent the keyboard press from initiating a cell edit, we have to return true in handlekeyboardnavigation. The keys that initiate grid edits are the number keys (48-57) and the letter keys (65-90). For completeness’s sake, the Enter key (13) and the F2 key (113) will also start editing a cell if people also want to check for those. So, the full description is, if the grid is focused but the user is not editing a cell and the user presses a number key or a letter key, return true (i.e. don’t put a grid cell in editing mode). Thanks again!

Author

Posts

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

You must be logged in to reply to this topic.