CssClasses.Add not working

4 posts, 0 answers
  1. Mathis Marugg
    Mathis Marugg avatar
    6 posts
    Member since:
    Feb 2006

    Posted 18 Mar 2008 Link to this post

    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.

  2. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 19 Mar 2008 Link to this post

    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

  3. Mathis Marugg
    Mathis Marugg avatar
    6 posts
    Member since:
    Feb 2006

    Posted 19 Mar 2008 Link to this post

    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.
  4. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 19 Mar 2008 Link to this post


    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
Back to Top