jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid

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

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

Author

Overriding Enter Key Posts

December 13, 2018 at 8:37 pm Overriding Enter Key #103192

Participant

I have a jqxgrid with inline row editing. I’ve implemented a custom cell editor with a textarea. The textarea is in a bootstrap popover that appears and focuses when you mouse over the field.

That part is working fine.

However, I wanted to be able to add newlines within the textarea, so I need to stop the inline form submitting on enter key. This is what I tried:


        columnModel.handlekeyboardnavigation = function(event)
        {
          var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
          if (key == 13) {
            return (textareaHasFocus != null);
          }
        };

When the textarea is focused, textareaHasFocus is set to the textarea object.

The above solution sometimes doesn’t work because jqxgrid stops event propagation when handlekeyboardnavigation returns true. That means, although the grid no longer submits, the textarea also doesn’t get the enter key and no newline is made.

That is the case if I focus the textarea via code. I can enter text but no newline.

However, if I actively click on the textarea, that puts it ahead of jqxgrid and it does create newlines. This means I can’t even hack in a solution to add in the newlines from columnModel.handlekeyboardnavigation, since I won’t know whether the textarea is ahead of or behind jqxgrid in the event propagation.

Really, I want jqxgrid to ignore the enter keypress, but to not stop event propagation. As a hack, I found that throwing an exception instead of “return (textareaHasFocus != null)” works perfectly – since it breaks out of the surrounding jqxgrid code. However, that’s not really a great solution.

Is there a way to override the default behavior (i.e. don’t submit the form on enter key – or use another key), while still propagating events?

December 15, 2018 at 6:56 pm Overriding Enter Key #103216

colinmacleod

Participant

^^ can someone please help me with this?

December 15, 2018 at 7:02 pm Overriding Enter Key #103217

colinmacleod

Participant

Further info, the method calling handlekeyboardnavigation returns false to jquery when handlekeyboardnavigation returns true.

This is what stops the event from propagating. I need some way to make the surrounding jqxquery method return true when handlekeyboardnavigation returns true.

December 17, 2018 at 12:46 pm Overriding Enter Key #103234

Hristo

Participant

Hello colinmacleod,

It has some misleading points in the description of the issue.
Could you clarify it?
Is the textarea part from the jqxGrid or in a separate popup?
The handlekeyboardnavigation is a callback function of the jqxGrid.
Please, take a look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from XML data.</title>
	<meta name="description" content="JavaScript Grid data binding to XML data" /> 	
    <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/jqxtextarea.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.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/customers.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editorElement = null;
            var currentContent = '';
            // Create jqxGrid
            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                editable: true,
                columnsresize: true,
                handlekeyboardnavigation: function (event)
                {
                    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                    if (key == 13) {
                        currentContent = editorElement.val() + '\n';
                        editorElement.val(currentContent);
                        return true;
                    } else if (key == 27) {
                        return true;
                    }
                },
                columns: [
                    {
                        text: 'First Name',
                        columntype: 'template',
                        //cellclassname: cellclass,
                        datafield: 'firstname',
                        width: 120,
                        createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            console.log(editor);
                            console.log(cellvalue);
                            console.log(celltext);
                            editorElement = $('<textarea id="customTextArea' + row + '"></textarea>').prependTo(editor);
                            editorElement.jqxTextArea({
                                height: 88,
                                width: '100%',
                                //minLength: 1
                            });
                        },
                        initeditor: function (row, cellvalue, editor, celltext, pressedChar)
                        {
                            currentContent = '';
                            editor.find('textarea').val(cellvalue);
                        },
                        geteditorvalue: function(row, cellvalue, editor) {
                            return editor.find('textarea').val();
                        }
                    },
                  //{ text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
                  { text: 'Country', datafield: 'Country', width: 100 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
        <div id="grid"></div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.