Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Dynamically populating the Apply Class dropdown on page load

Dynamically populating the Apply Class dropdown on page load

Article Info

Rating: Not rated

Article information

Article relates to

 RadEditor for ASP.NET AJAX
 Telerik.Web.UI

Created by

 Rumen Zhekov

HOW-TO
Dynamically populate the "Apply Class" dropdown on page load

DESCRIPTION
The "Apply Class" tool is very often populated from an external css file or from the styles existing on the page where the editor resides. However, sometimes it is needed to dynamically populate the dropdown with items on page load via a styles taken from a string value without using a css file to refer to.

SOLUTION
To add a string containing styles to the editor's content area on editor load use the following approach:

<script type="text/javascript">  
//Some variable containing the CSS  
var contents = ".class1 { color:red;} .class2 { color:green;}";  
 
//Editor onload function  
function OnClientLoad(editor)  
{  
    //get a reference to the RadEditor document object  
    var doc = editor.get_document();  
      
    //get a reference to the HEAD tag of the document  
    var head = doc.getElementsByTagName("HEAD")[0];  
      
    //create a style tag and append it to the head  
    var style = doc.createElement("STYLE");  
    head.appendChild(style);  
 
    //dynamically load the classes in the style tag  
    if ($telerik.isIE)  
    {  
        style.styleSheet.cssText = contents;  
    }  
    else 
    {  
        style.innerHTML = contents;             
    }  
}  
</script>  
<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"></telerik:radeditor> 

REMARK
The solution is based entirely on the client-side. To achieve the same result on the server generate the string
var contents = ".class1 { color:red;} class2 { color:green;}";
dynamically in C# / VB in the code-behind, and then registering it as a startup script using the ScriptManager.RegisterStartupScript method.

There is no simpler way of achieving this scenario without client-side script, because the editor creates its content area IFRAME on the client.

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.