jQuery UI Widgets Forums Grid Turn off "type to edit" feature

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 #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

    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/

    Turn off "type to edit" feature #83149

    sirstruck
    Participant

    This works great — thanks, Dimitar!

    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

    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/

    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!

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

You must be logged in to reply to this topic.