CssClasses.Add not working

[Mathis Marugg]

To customize a RadHtmlField we managed adding a project specific CSS file easily: 

   :

protected override void OnLoad(EventArgs e)

{

   base.OnLoad(e);

   base.radEditorControl.AllowScripts = true;

   base.radEditorControl.CssFiles = new string[]{ "/styles/css/styles.css" };

:

The editor shows all classes that can be found in styles.css in the "Apply CSS class" dropdown. Cool.

Beside a lot of other style definitions this CSS file contains classes like:

.SaiaStylesCustom-Saia-Text

{

 font-size: 12px;

 font-weight: normal;

 font-family: Arial, Helvetica, sans-serif; 

 color: #212121;

}

We now would like to see just these .SaiaStylesCustom-xxx-xxx classes in the dropdown. Therefore we added the following in the OnLoad event handler:

   :

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

base.radEditorControl.AllowScripts = true;

base.radEditorControl.CssFiles = new string[] { "/styles/css/editorstyles.css" };



try

{

base.radEditorControl.CssClasses.Add(".SaiaStylesCustom-Saia-Text ", ".SaiaStylesCustom-Saia-Text");

:

We expected the dropdown to show just the classes we added, but we still can see all the other once present in the CSS file. Any idea what we're doing wrong? Help would be appreciated.

[Rumen]

Hello Mathis,

Our suggestion is to clear the CssClasses collection and after that to add the .SaiaStylesCustom-Saia-Text class to the Apply Class dropdown. Please, also remove the empty space after the

.SaiaStylesCustom-Saia-Text name, e.g.

base.radEditorControl.CssClasses.Add(".SaiaStylesCustom-Saia-Text", ".SaiaStylesCustom-Saia-Text");

I made a test with the latest version of RadEditor 7.3.2 and the CssFiles and CssClasses worked as expected. Here is the used code:

codebehind

protected void Page_Load(object sender, EventArgs e)
{
    RadEditor1.CssFiles = new string[] { "~/editorstyles.css" };
    RadEditor1.CssClasses.Clear();
    RadEditor1.CssClasses.Add(".SaiaStylesCustom-Saia-Text", ".SaiaStylesCustom-Saia-Text");
}


editorstyles.css

.SaiaStylesCustom-Saia-Text
{
  font-size: 12px;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  color: #212121;
}
.redText{ color: red;
}
.greenText {color: green;}

These settings populated the Apply Class dropdown only with .SaiaStylesCustom-Saia-Text class item.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mathis Marugg]

Thanks for your suggestion. Unfortunately even using the Clear method the classes didn't show up in the drop down.

As long as we tried to add the classes in the OnLoad or in the OnInit event nothing happend. But we then found out the adding the classes in the OnPreRender event worked without any problems. So we probably tried to add the classes just a little bit to early.

[Rumen]

I am glad that you have solved the problem.

Yes, it is OK to add the classes in the OnPreRender event.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center