jQuery UI Widgets › Forums › Grid › On EnterKey Grid Cell should be in EditMode…

Tagged: , , , , , , , , ,

This topic contains 4 replies, has 3 voices, and was last updated by  joyce973 6 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    On EnterKey Grid Cell should be in EditMode… Posts
  • March 12, 2014 at 10:20 am On EnterKey Grid Cell should be in EditMode… #50912

    rani
    Participant

    Hi,

    I need keyboard funtionality on Grid, where i can select the column or edit the column by using keyboard (for ex: on enter key press the column or cell of the grid should be in Edit mode..if i once again press on same cell when in editmode , the column should be in non-editable mode ..i mean it should come to its orginal position..is there any solution on this.. if pls provide ….

    Regards,
    Rani.

    March 12, 2014 at 2:14 pm On EnterKey Grid Cell should be in EditMode… #50932

    Dimitar
    Participant

    Hello Rani,

    Here is 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.10.2.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: 670,
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                editmode: 'selectedcell',
                selectionmode: 'singlecell',
                handlekeyboardnavigation: function (event) {
                    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                    if (key == 13) {
                        var cell = $('#jqxgrid').jqxGrid('getselectedcell');
                        if (editFlag == false) {
                            $("#jqxgrid").jqxGrid('begincelledit', cell.rowindex, cell.datafield);
                        } else {
                            $("#jqxgrid").jqxGrid('endcelledit', cell.rowindex, cell.datafield);
                        };
                        return true;
                    };
                },
                columns: [
                  { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250 },
                  { text: 'S&P 500', datafield: 'S&P 500', width: 200, cellsformat: 'f' },
                  { text: 'NASDAQ', datafield: 'NASDAQ', width: 200, cellsformat: 'f' }
                ]
            });

            var editFlag = false;

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

            $("#jqxgrid").on('cellendedit', function (event) {
                editFlag = false;
            });
        });
    </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 29, 2018 at 2:27 pm On EnterKey Grid Cell should be in EditMode… #99958

    joyce973
    Participant

    Hi Dimitar,
    sorry for replying this old thread, but I’m having some trouble with this solution: I’m using your code above, but I receive this error: “Uncaught TypeError: Cannot read property ‘rowindex’ of null”.
    Can you give me any advise?
    tnx
    Antonio

    April 30, 2018 at 5:27 am On EnterKey Grid Cell should be in EditMode… #99961

    Dimitar
    Participant

    Hi Antonio,

    Please try the following, updated, solution: https://jseditor.io/?key=jqxgrid-edit-on-enter-key. We hope it helps.

    Best Regards,
    Dimitar

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

    May 1, 2018 at 8:05 am On EnterKey Grid Cell should be in EditMode… #99979

    joyce973
    Participant

    Thank you very much, Dimitar.
    It works perfecly
    Best Regards

    Antonio

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.