Integrate the RichTextEditor component into a Grid dialog template in editing mode

[Manuel]

In the actionComplete method, I create a RichTextEditor object:

...

 new ej.richtexteditor.RichTextEditor(
 {
 height: 300,
 placeholder: 'Description',
 floatLabelType: 'Always',
 toolbarSettings: {
 items: ['Bold', 'Italic', 'Underline', '|',
 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|',
 'CreateLink', 'Image', '|', 'SourceCode']
 },
 value: args.rowData.description
 },
 args.form.elements.namedItem('description')
 );

....

And in the template script (of the dialog), I link it like this:

<div class="col-12">
 <div class="e-float-input e-control-wrapper">
 <textarea id="description" name="description" type="text" value=\${if(isAdd)} '' \${else} \${description} \${/if}></textarea>
 </div>
 </div>

The problem is that the result, the value of "description" is duplicated:

Can you provide an example of how to integrate RichTextEditor into the template correctly?

Thank you

[Dineshnarasimman Muthu]

Hi Manuel,

Greetings from Syncfusion Support.

We have reviewed your query about textarea displaying when RichTextEditor is bound in the dialog template of the grid. We noticed that you have wrapped the textarea tag using a div element with which contains e-float-input class. When binding the RichTextEditor to the textArea element, the RTE component will set display none to the textarea element. In this case, when wrapping textArea element with e-float-input element, the display none style is overridden. 

We suggest you to remove the e-float-input class from the div element, the code snippet have been attached for your reference.

 <div class="form-row">

                <div class="form-group col-md-6">

                    <input type="text" name="ShipCountry" id="ShipCountry" value=${if(ShipCountry === null || ShipCountry === undefined)} '' ${else} ${ShipCountry} ${/if} />

                </div>

                <div class="col-md-12">

                    <div class="e-control-wrapper">

                    <textarea type="text" name="ShipCity" id="ShipCity" value=${if(ShipCity === null || ShipCity === undefined)} '' ${else} ${ShipCity} ${/if}></textarea>

                </div>

            </div>

            </div>

 

 

Also, you can set override the styles property of the richtexteditor element in the html page

    <style>

      .e-richtexteditor .e-rte-hidden {

        display: none !important;

      }

    </style>

 

Image:

Sample: https://stackblitz.com/edit/q1rdpr-x9gjtj?file=index.js,index.html

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M

[Manuel]

thanks for your help  Dineshnarasimman Muthu.

The support is fantastic!!!

[Surah Al Waqiah]

It looks like you're duplicating the initialization of the RichTextEditor by creating it in the actionComplete method and then linking it again in the template. Instead, try initializing the RichTextEditor only in the actionComplete method, and ensure that your template only contains the textarea without re-assigning the value.

Here's how you can streamline it:

1. Template:

   html
   Copy code
   <div class="col-12">
       <div class="e-float-input e-control-wrapper">
           <textarea id="description" name="description"></textarea>
       </div>
   </div>
   

2. actionComplete Method:

   javascript
   Copy code
   if (args.requestType === 'beginEdit' || args.requestType === 'add') {
       new ej.richtexteditor.RichTextEditor({
           height: 300,
           placeholder: 'Description',
           floatLabelType: 'Always',
           toolbarSettings: {
               items: ['Bold', 'Italic', 'Underline', '|',
                       'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|',
                       'CreateLink', 'Image', '|', 'SourceCode']
           },
           value: args.rowData ? args.rowData.description : ''
       }, args.form.elements.namedItem('description'));
   }
   

This approach ensures that the RichTextEditor is only initialized once, and it correctly binds the value without duplication.

4o

[Dineshnarasimman Muthu]

Hi Surah,

We have reviewed your suggestion regarding the not assigning the value to the textArea component to overcome this textarea element duplicate. We would like to tell you that value in the textarea element won't be necessary as we have already the provided the value in the actionComplete event of the grid.

However, even when removing the value element from the text area, the textarea element and RTE both will be displayed. Like we said in the previous update the display property is overridden due to the e-float-input class which is wrapped to the textarea element. You can either remove e-float-input class name or you can set display none property to the e-richtexteditor .e-rte-hidden class.

Sample: https://stackblitz.com/edit/q1rdpr-decnko?file=index.js,index.html

We have attached the sample for your reference.

Regards,

Dineshnarasimman M

[jack smith]

"Integrated the RichTextEditor into the Grid's dialog template for enhanced text editing during edit mode."

.

[Sivaranjani Rajasekaran]

Hi jack smith,

Thank you for the update. We're glad to hear that you were able to successfully integrate the RichTextEditor into the Grid's dialog template for enhanced text editing during edit mode.

If you have any other requirements or need further assistance, please feel free to share them with us. We're happy to help!

[jack smith]

Integrating the RichTextEditor component into a Grid dialog template in editing mode enhances the user experience by allowing formatted text input directly within data grids. This is particularly useful for content-heavy fields like descriptions or notes. However, it requires careful configuration to ensure compatibility with the grid's data binding and validation systems. Done right, it creates a seamless and powerful editing interface within a structured UI.

[Kishore Muthukrishnan]

Hi jack smith,

 

Thank you for the update. We appreciate your insights on integrating the RichTextEditor into the Grid’s dialog template ensuring compatibility with data binding and validation is indeed key to a seamless integration. We are glad to hear the integration went well. If you need further assistance, feel free to let us know!

 

Regards,

Kishore Muthukrishnan

[David Trent]

Integrating the RichTextEditor into a Grid dialog makes it super easy to create and edit personalized content—perfect for crafting thoughtful Birthday Wishes for Friends right within your app!