Initialize on data attributes

[Wouter]

I prefer to initialize controls based on html, however this is not working if a page gets loaded via ajax. If I create the control with javascript after the ajax page load the component renders with all the default values instead of the specified values from the data attributes.

Demo, new area gets prepended before the editor, waits are purely to demonstrate the effects

[Wouter]

PS: The rte is merely used as an example. The question is : how can I instantiate dynamically loaded controls based on data attributes?

[Dhivyalakshmi Thirumurugan]

 

Hi Wouter, 

 

Thanks for contacting Syncfusion support. 

We have analyzed your sample and you have used jQuery clone() method. The clone method only clones the DOM element, so we cannot expect it copies the model value of RTE(properties). For setting the model values, first we need to take that instance of the corresponding RTE and save that model values in variable, then should pass it to the RTE rendering. Please find the code below.

setTimeout(function () { 

// Creates the RTE 

var obj=$("#CorrectLoaded").data("ejRTE"); 

var rte=obj.model; 

$("#IncorrectLoaded").ejRTE(rte); 

var rteObj = $("#IncorrectLoaded").data("ejRTE"); 

rteObj.setHtml($("#IncorrectLoaded").val() + 

              "<br />RTE is created, but with de defaults :( \n<br />RTE Instance is: <br /><pre>" + 

              JSON.stringify(rteObj, function (key, val) { 

                             if (val != null && typeof val == "object") { 

                                           if (seen.indexOf(val) >= 0) { 

                                                          return; 

                                           } 

                                           seen.push(val); 

                             } 

                             return val; 

              })+"</pre>"); 

}, 9000); 

We have prepared the sample as per your requirement and please find the sample below.

Sample Link: http://jsplayground.syncfusion.com/c1uiv3cf

If we have misunderstood your query, then please get back us with more details, so that we will help you better.

 

Please let us know if you have any queries. 

 

Regards, 

Dhivyalakshmi. 

[Wouter]

The clone method was used as a substitute for ajax loading. What I meant was that the html is not there at page load. Here is a simple example: http://jsplayground.syncfusion.com/ylls4te2
I know that adding the data-role beforehand fixes the problem, but I want to instantiate manually but still use the configuration via the data attributes.

[Dhivyalakshmi Thirumurugan]

Hi Wouter, 

 

Thanks for the update. 

 

For instantiating the RTE control manually. Please check the below code.   

 

<div id="renderDiv">   

     

              <textarea id="FollowUp"      

                cols="96"   

                data-ej-showfooter="true"    

                data-ej-showhtmlsource="true"    

                data-ej-tools-clear="[&quot;clearFormat&quot;,&quot;clearAll&quot;]"    

                data-ej-tools-clipboard="[&quot;cut&quot;,&quot;copy&quot;,&quot;paste&quot;]"    

                data-ej-tools-copypaste="[&quot;cut&quot;,&quot;copy&quot;,&quot;paste&quot;]"    

                data-ej-tools-doaction="[&quot;undo&quot;,&quot;redo&quot;]"                              

                data-ej-tools-links="[&quot;createLink&quot;,&quot;removeLink&quot;]"    

                data-ej-tools-lists="[&quot;unorderedList&quot;,&quot;orderedList&quot;]"                           

                data-ej-toolslist="[&quot;lists&quot;,&quot;clipboard&quot;,&quot;doAction&quot;,&quot;clear&quot;,&quot;links&quot;]" >   

              </textarea>   

</div>   

  

  

   <script type="text/javascript" class="jsScript">   

    $(function() {           

  

        $("#FollowUp").attr("data-role", "ejrte");   

        ej.widget.init($("#renderDiv"));   

                                

    });   

    </script>   

  

  

In the above code, we have created the wrapper around the RTE and passed that wrapper id to ej.widget.init() function. Because ej.widget.init(“#rendrDiv”) is used to initiate the control which is given within that wrapper.   

   

We have prepared the sample for your reference. Please check the sample link below.   

   

Sample Link: http://jsplayground.syncfusion.com/twk54wxj    

Please let us know if you have any queries.  

  

Regards,   

Dhivyalakshmi.   

[Wouter]

Thanks! Thats what I was after.

[Dhivyalakshmi Thirumurugan]

Hi Wouter,    

  

Thanks for the update.    

  

We are glad to hear that your issue has been resolved. Please get back to us if you need any further assistance.    

  

Regards,    

Dhivyalakshmi.