Render richtext editor in viewcomponent

[Jordi Stevens]

Hello,

I'm unable to render ej2 syncfusion in a .net core Viewcomponent. I load the viewcomponent with an ajax call:

    function DoelenboekShow(leerlingGroepID, doelenRapportID, gebruikerID, leerlingID) {

      $.ajax({

          url: "/DoelenRapport/DoelenboekGet",

          type: "GET",

          cache: false,

          async: true,

          dataType: "html",

          data: {

            leerlingGroepID: leerlingGroepID,

            doelenRapportID: doelenRapportID,

            gebruikerID:gebruikerID,

            leerlingID: leerlingID

          },

          success: function (data) {

            container.html(data);

            modelGebruikerID = 0

            modelLeerlingGroepID = 0

            modelDoelenRapportID = 0

          }

        });

    };

In my viewcomponent i try to load the text editor like this:

              ejs-richtexteditor id="[email protected][i].KlasVakID" value="@Model.Feedback[i].Feedback">

            <e-richtexteditor-pastecleanupsettings Prompt="false" deniedTags="@ViewBag.deniedTags" keepFormat="false"></e-richtexteditor-pastecleanupsettings>

            <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>

            <e-content-template>

            </e-content-template>

          </ejs-richtexteditor>           

          

I also have the tag helper aded: 

@addTagHelper *, Syncfusion.EJ2

The toolbar isn't loaded and i think the whole javascript code isn't loaded since whenever i do the next console.log i get undefined:

 console.log($($("[id^='feedback_']")[0])[0].ej2_instances)

Also when i inspect the element i only get 

textarea id="feedback_591790" class="valid" aria-invalid="false">            </textarea>

[Jordi Stevens]

An update on my part: Rendering the RTE within a viewcomponent works when you use @await Component.InvokeAsync() but doesn't work when you render it using an Ajax call. We need to use an Ajax call since we need different data in de viewcomponent based on some dropdownlists

[Jordi Stevens]

Solved! You need to add     <ejs-scripts></ejs-scripts> in de the default.cshtml page for your viewcomponent aswell.

[Indrajith Srinivasan]

Hi Jordi, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. You need to evaluate the JavaScript code, in the dynamically rendered RichTextEditor page by using the eval and adding the script manager <ejs-scripts> tag. Check the below shared code blocks and sample for reference. 

 

In the below shared sample, we have dynamically rendered the RichTextEditor using the Ajax call. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162340/ze/RTE_dynamic_rendering-1516562206 

 

PartialPage/Index.cshtml 

 

 

<div> 

    <ejs-richtexteditor id="Content"> 

        <e-content-template> 

            <p>Synfusion RichTextEditor</p> 

        </e-content-template> 

    </ejs-richtexteditor> 

</div> 

<br /> 

 

<ejs-scripts></ejs-scripts> 

 

 

Home/Index.cshtml 

 

 

<div class="row" style="margin-top:50px;"> 

    <ejs-button isPrimary=true id="but" onclick="clickAjax()"><e-content-template>Load PartialView</e-content-template></ejs-button> 

</div> 

<div class="row"> 

    <div id="PartialView"> </div> 

</div> 

 

<script> 

    function clickAjax() {  

        var ajax = new ej.base.Ajax('/PartialPage/index', 'GET', true); 

        ajax.send().then(function (result) { 

            document.getElementById('PartialView').innerHTML = result; 

            if (document.getElementById('PartialView').querySelector('script') !== null) { 

                eval(document.getElementById('PartialView').querySelector('script').innerHTML); 

            } 

        }); 

    } 

</script> 

 

 

We are glad that your reported issue is resolved, Please get back to us if you need any further assistance. 

 

Regards, 

Indrajith