Overriding Enter Key in TextArea of editable jqx Grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

This topic contains 1 reply, has 2 voices, and was last updated by Hristo 6 years ago.

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

Author

Overriding Enter Key in TextArea of editable jqx Grid Posts

January 2, 2019 at 10:22 am Overriding Enter Key in TextArea of editable jqx Grid #103356

GopiMac

Participant

Hi Team,

I have the custom cell in my JqxGrid where user can enter multi-line texts so i’m using jqxTextArea.

But on edit mode when I enter next line in the text area then grid get saved . I have to avoid save event while users editing the text area columns

Could you please suggest how to handle the enter key in TextArea

text: ‘free Comments’,
width: 300,
columntype: ‘template’,
editable: true,
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<span style=”margin: 4px; white-space: pre-wrap;float: ‘ + columnproperties.cellsalign + ‘”>’ + value + ‘</span>’;
},
createeditor: (row, cellvalue, editor, cellText, width, height) => {
// construct the editor.
editor.jqxTextArea({
width: ‘100%’,
height: ‘250px’,
theme: ‘metro’
});
},
initeditor: (row, cellvalue, editor, celltext, width, height) => {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxTextArea(‘val’, cellvalue);
},
geteditorvalue: (row, cellvalue, editor) => {
// return the editor’s value.
return editor.val();
}
},

January 3, 2019 at 10:34 am Overriding Enter Key in TextArea of editable jqx Grid #103374

Hristo

Participant

Hello GopiMac,

You could try to achieve that with an implementation of the handlekeyboardnavigation.
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',
                        datafield: 'firstname',
                        width: 120,
                        createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            editorElement = $('<textarea id="customTextArea' + row + '"></textarea>').prependTo(editor);
                            editorElement.jqxTextArea({
                                height: 88,
                                width: '100%'
                            });
                        },
                        initeditor: function (row, cellvalue, editor, celltext, pressedChar)
                        {
                            currentContent = '';
                            editorElement.val(currentContent);
                        },
                        geteditorvalue: function(row, cellvalue, editor) {
                            return editor.find('textarea').val();
                        }
                    },
                  { 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 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.