Using Multiline TextArea in the InPlaceEditor

[Craig]

Hi,

I am trying to use in the InPlaceEditor to return a MultiLine text box. I can get a single line text box and the RTE control, but I need the ability to return non-HTML text with line breaks.

I have tried adding a <textarea> tag with these instructions: https://ej2.syncfusion.com/javascript/documentation/in-place-editor/integration/ and this code

     var ShippingNotes = new ej.inplaceeditor.InPlaceEditor({

                    mode: 'Inline',

                    type: 'Text',

                value: '@Model.ShippingNotes',

                actionSuccess: function (ActionEventArgs) {

                    orderInvoice.ShippingNotes = ActionEventArgs.value;

                    SaveOrderInvoice();

                },

                actionBegin: function (e) {

                        var value = ShippingNotes.element.querySelector('#TextNotes').value;

                        editObj.value = value;

                        e.value = value;

                    }

                });

                ShippingNotes.appendTo('#ShippingNotes');

<textarea id="TextNotes">

This gives me the multiline box (see attached), but:

1. Hitting the return key closes the control ( i need it to give a line break. I will submit the data by clicking on the tick )

Please advise?

[Craig]

Attached screenshot as referred to

Attachment: 20190502_091109_8b9cb775.zip

[Prince Oliver]

Hello Craig, 

Thanks for using Syncfusion Products. 

  

We have checked your requirement, if you wish to submit the data only on button click than you can disable the submitOnEnter property. In-place Editor supports adding HTML5 input elements using the template property. If you wish to show the non-HTML text with line breaks after submitting the value, you can add white-space as pre-wrap on ‘.e-editable-value’ class name using Styles. Please find the below code for your reference. 

[Index.ts] 

let editObj: InPlaceEditor = new InPlaceEditor({ 

    submitOnEnter: false // Disable the submit action when enter key pressed 

    }); 

[Index.html]  

<style> 

    .e-editable-value { 

        white-space: pre-wrap; // Show the In-place Editor with line breaks 

    } 

</style> 

  

Sample: https://stackblitz.com/edit/nrcjtp-jrctpb?file=index.html 

  

In above sample, we have rendered the In-place Editor component with text area using template property and shown the In-place Editor component with line breaks and also prevented the submit action when enter key pressed. 

API link: https://ej2.syncfusion.com/documentation/api/inplace-editor#submitonenter 

Let us know if you need any further assistance on this. 

Regards, 

Prince