We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Using Multiline TextArea in the InPlaceEditor


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;
                actionBegin: function (e) {
                        var value = ShippingNotes.element.querySelector('#TextNotes').value;
                        editObj.value = value;
                        e.value = value;

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

2 Replies

CR Craig May 2, 2019 08:13 AM UTC

Attached screenshot as referred to

Attachment: 20190502_091109_8b9cb775.zip

PO Prince Oliver Syncfusion Team May 3, 2019 11:04 AM UTC

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. 

let editObj: InPlaceEditor = new InPlaceEditor({ 
    submitOnEnter: false // Disable the submit action when enter key pressed 

    .e-editable-value { 
        white-space: pre-wrap; // Show the In-place Editor with line breaks 
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. 

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


Live Chat Icon For mobile
Up arrow icon