Controling Apply CSS dropdown and rendering

7 posts, 0 answers
  1. Anders
    Anders avatar
    7 posts
    Member since:
    Apr 2011

    Posted 01 Nov 2012 Link to this post

    Hi,

    I want to display only a subset of classes in the Apply CSS drop-down list.
    I have two CSS files, and I want to render the document with the content of both in the editor, but I want only the classes of one of them to be selectable in the dropdown list.

    I noticed that the drop-down list is populated when you first click on the item. And it then reads all the CSS classes that are loaded in the document.

    How can I either trigger the population of the drop-down list or otherwise get the required behaviour?

    I tried setting the CSSFiles property either programmatically or via the Tools.xml file, but I then noticed I could delay-load a CSS file in the iframe, but I need to trigger the event, otherwise I get all classes, and it becomes rather messy.

    I do now know before hand what classes are defined in the CSS-files as they might be a number of different setups for our different customers.

    I hope you can help me.

  2. Stanimir
    Admin
    Stanimir avatar
    1654 posts

    Posted 05 Nov 2012 Link to this post

    Hi Anders,

    You can control which classes to be loaded in the dropdown by setting the CssClasses collection: Review the following online help article: http://www.telerik.com/help/aspnet-ajax/editor-css-styles.html

    If you don't find the article helpful, provide me with a sample page with styles and an editor in it. Explain in a step by step scenario what behavior exactly you are expecting and I will implement a custom workaround for you.

    All the best,
    Stanimir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Anders
    Anders avatar
    7 posts
    Member since:
    Apr 2011

    Posted 05 Nov 2012 Link to this post

    I've seen that I can set the classes programmatically, but our solution has a number of different customers, each with a different set of classes defined, so I don't know beforehand what those classes may be.

    Here's the scenarion.
    I have an editor loading a complete page in iframe mode, complete in the sense that it includes, html, head and body tags. In the head-tag I link two CSS files: global.css and webcontent.css. Global.css contains information about DIV spacing, font-family, borders, margins, etc. WebContent contains a number of CSS classes defining, for example, Header, Title, Subheader, etc.

    So, I would like the editor to render the HTML with the complete set of classes, so that borders and spacings are correct, but I do not want the users to be able to select in the CSS-dropdown an item like 'div2pxBorderBlue', but ONLY Header, Title, Subheader and so forth.

    I've tried omitting Global.css from the HTML, I get the classes I want in the dropdown list, but the document is not rendered properly.
    I've tried adding an external CSS file to the editors CSSFiles collection, both via the Tools.xml file or through code, but to no avail. All the classes currently loaded in the document are displayed in the dropdown list.

    I tried upgrading just now to the lastest version (Q3 2012) but to no avail.

    I hope I make myself understood.

    Thank you,
    .anders
  4. Stanimir
    Admin
    Stanimir avatar
    1654 posts

    Posted 08 Nov 2012 Link to this post

    Hello Andress,

    Please provide me with a sample page (including sample css as well) where the problem is reproducible. I will review the RadEditor configuration and advise you further.

    Regards,
    Stanimir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Anders
    Anders avatar
    7 posts
    Member since:
    Apr 2011

    Posted 12 Nov 2012 Link to this post

    Hi again Stanimir,

    I have created a sample Editor page with what I am trying to achieve.

    How or where should I send the file? I cannot upload it to this thread.

    I sincerly hope you can advise me.


    Yours,
    .anders
  6. Anders
    Anders avatar
    7 posts
    Member since:
    Apr 2011

    Posted 12 Nov 2012 Link to this post

    Created a support ticket for this issue: 628783

    Cheers,
    .a
  7. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 13 Nov 2012 Link to this post

    Hi,

    I just answered your support ticket. For your convenience I have pasted below my answer:

    The CssFiles property just imports a CSS file or files in the content area of RadEditor but it does not remove the existing CSS files from it. Since you directly load the CSS files via link tags with the content through the Content property the CssFiles will not work for your scenario.

    What you can do is to modify the loaded content by adding the desired CSS file according to the logged user as shown below:

    Dim styles = String.Empty
    Dim user1 = "Peter"
    If (user1 Is "Peter") Then
        styles = "<link rel='stylesheet' href='global.css' />"
    Else
        styles = "<link rel='stylesheet' href='webcontent.css' />"
    End If
      
    Dim html As String = "<html><head>" + styles + "</head><body><div class='globalDiv'>This div has a frame defined in global.css<br /><span class='header1'>This span och class header1 is defined in WebContent.css</span><br /><br />The drop down list should only contain header1 and NOT globalDiv</body></html>"
      
    editor.Content = html


    You can see my test in the following video: http://screencast.com/t/FAdCF7kpJ.




    Kind regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top