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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using Multiline TextArea in the InPlaceEditor

Thread ID:

Created:

Updated:

Platform:

Replies:

144349 May 2,2019 08:12 AM UTC May 3,2019 11:04 AM UTC JavaScript - EJ 2 2
loading
Tags: InPlaceEditor
Craig
Asked On May 2, 2019 08:12 AM UTC

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
Replied On May 2, 2019 08:13 AM UTC

Attached screenshot as referred to

Attachment: 20190502_091109_8b9cb775.zip

Prince Oliver [Syncfusion]
Replied On 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. 

[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> 
  
  
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. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon