This is a migrated thread and some comments may be shown as answers.

[Solved] Show only certain css classes in 'Apply CSS Class' dropdown box

3 Answers 153 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Mink asked on 29 May 2009, 02:05 PM

Hi,

The information I need i probably in one of the other threads, but I'm getting a little confused.

What I'm trying to do:
I have a RadEditor in an (Ajax enabled) aspx page and I would like the 'Apply CSS Class' dropdown box to show only those css classes I have defined in a separate .css file 'CustomUserClasses.css' in the folder '~/EditorConfigs'.

The result is that the dropdown box shows all the css classes defined in the .css file that formats the page the RadEditor is in. Appearantly it finds them automaticly. But the classes I defined in CustomUserClasses.css (.important and .unimportant, just for testing purposes) aren't shown.

What I did in the code behind file is similar to this:

    
            protected void Page_Load(object sender, EventArgs e) 
        
            { 
        
            if (!IsPostBack) 
        
            { 
        
            rePageContentsEditor.CssFiles.Clear(); 
        
            rePageContentsEditor.CssFiles.Add(new EditorCssFile("~/EditorConfigs/CustomUserClasses.css")); 
        
            rePageContentsEditor.ContentAreaCssFile = "~/EditorConfigs/CustomUserClasses.css"; 
        
            rePageContentsEditor.ToolsFile = "~/EditorConfigs/TestToolsFile.xml"; 
        
            } 
        
            }

Because of what I read in other threads I tried to set both the CssFiles and the ContentAreaCssFile properties and I set the ToolsFile last.

I'm sure it's actually quite simple if you know what to do, but I'm not getting anywhere (on this rather warm friday afternoon :-)).
Please help.

Regards,

Mink

3 Answers, 1 is accepted

answered on 01 Jun 2009, 01:40 PM

Hi Mink,

The CSS class dropdown of RadEditor displays all classes defined in the page or from external CSS files by default. The dropdown is populated from the CssClasses Collection and you can use it to restrict and populate the dropdown only with the desired classes. You can see how to set to the CssClasses collection declaratively, programmatically and using the ToolsFile in the following help article: CSS Styles.

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 02 Jun 2009, 08:20 AM

Hi Rumen,

Thanks for your reply.
It was very clear. However, at first I just couldn't get it to work.
It turns out that I had to set the ToolsFile property before I set the CssFiles property instead of the other way around.
I had read something about the order being important, but appeareantly I got it the other way around. The moment I put things in the right order it worked perfectly. As a matter of fact I don't even need to use the CssClasses property because the external css file I use contains exactly and only the css clss definitions I need. And that is exactly the behaviour I expected.

As it turns out my only problem was with the order I set the properties. ToolsFile should go before CssFiles.
Mayby it's an idea to point this out when discussing the CssFiles property/CSS class dropdown in the documentation?

Regards,

Mink