1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. "created" event not firing when loading RTE from partial

"created" event not firing when loading RTE from partial

I have a partial Razor Page that contains the RTE.  I am returning the partial from a controller via a jquery ajax call and loading to a modal.  I had previously had to use the created event to get the toolbar to work with tabs, however this event doesnt seem to be firing when partial is loaded/displayed to the page.


the result is that the RTE is not being




5 Replies
BS Buvana Sathasivam Syncfusion Team April 1, 2022 12:52 PM UTC

Hi Aaron,


Greetings from Syncfusion support.


You can solve your problem by defining the Rich Text Editor's created event on the main(Index.cshtml) page. In the below sample, we have rendered the modal dialog and loaded the content via a partial view page that contains a Rich Text Editor component. The Rich Text Editor created event defined on the main page. We have refreshed the Rich Text Editor after opening the dialog component using the open event. Please find the below code and sample for your reference.

Index.cshtml

<script>  

   function dialogOpen() {

        var rteObj = document.getElementById('Content').ej2_instances[0];

        rteObj.refreshUI();

    }

    function created() {

        alert("RTE Created");

    }

</script>


PartialView/Index.cshtml

 

<div>

    <ejs-richtexteditor id="Content" showCharCount="true" enabled="true" height="400" created="created">

        <e-content-template></e-content-template>

    </ejs-richtexteditor>

</div>

<br />

<ejs-scripts></ejs-scripts>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_PartialView-739939290_(2)-141951530


Please check the above solution and get back to us if your problem is not resolved.

Regards,

Buvana S


AK Aaron Knipe April 4, 2022 06:45 PM UTC

Good Afternoon, unfortunately your sample doesnt address my issue.  I have attached a sample sln that demonstrates the problem we are having.   The created event on the ejs never fires.


Attachment: ModalSample_bf847284.zip

BS Buvana Sathasivam Syncfusion Team April 5, 2022 07:29 PM UTC

Hi Aaron,


We have checked your shared sample and modified it. You need to refer to the Syncfusion scripts and styles and register the Syncfusion script manager at the _Layout.cshtml page. To solve your problem, you need to evaluate scripts manually and have to add a script manager to a partial page. Please find the below code and sample for your reference.

_Layout.cshtml

<head>

    <!-- Syncfusion ASP.NET Core controls styles -->

    <link rel="stylesheet" rel='nofollow' href=https://cdn.syncfusion.com/ej2/20.1.47/material.css />

    <!-- Syncfusion ASP.NET Core controls scripts -->

    <script src=https://cdn.syncfusion.com/ej2/20.1.47/dist/ej2.min.js></script>

</head>

<body>

    ………..

    @await RenderSectionAsync("Scripts", required: false)

    <ejs-scripts></ejs-scripts>

</body>

</html>


Shared/_RTE.cshtml

@model string

<div class="modal" tabindex="-1" role="dialog">

    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">

        <div class="modal-content">

            <form method="post">

<ejs-richtexteditor id="testRTE" name="RecommendationFollowUpRequired" value="@Model" created="onCreated"></ejs-richtexteditor>

              

            </form>

        </div>

    </div>

</div>

<ejs-scripts></ejs-scripts>


Index.cshtml

  <script>

        $('#showModal').on('click', function(){

            $.ajax({

                url: '@Url.Action("LoadModal","Modal")',

                method: 'GET',

                success: function(data){

                    $('#modalPlaceHolder').empty();

                    document.getElementById('modalPlaceHolder').innerHTML = data;

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

                    $('#modalPlaceHolder > .modal').modal('show');

                    modalRTE.refreshUI();

                }

            });

        });

    </script>

 

    <script>

    var modalRTE;

 

        function onCreated() {

            modalRTE = this;

    }

</script>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MODALS~21757970712


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/aspnet-core-mvc-taghelper#add-style-sheet


Knowledge Base: https://www.syncfusion.com/kb/9630/how-to-render-syncfusion-components-in-partial-view


Please let us know if you have any problems.


Regards,

Buvana S


AK Aaron Knipe April 7, 2022 02:14 PM UTC

Thank you, this seems to have solved my issue!


BS Buvana Sathasivam Syncfusion Team April 8, 2022 11:03 AM UTC

Welcome. We are glad that your reported issues are resolved. Please get back to us if you need any further assistance.


Loader.
Up arrow icon