Progressive disclosure with RadEditor

8 posts, 0 answers
  1. Jocelyn
    Jocelyn avatar
    4 posts
    Member since:
    Mar 2013

    Posted 01 Mar 2013 Link to this post

    Currently working on the UI design for help documentation that will be created using RadEditor. I would like to include progressive disclosure of details in the guidelines, but I'm not sure if it is easily supported by Rad Editor.

    What do I mean by progressive disclosure?

    For example the screen might by default display:

    Work instruction title
    Why do we do this?

    Step 1: Instruction step 1...


    If the person reading the instruction is interested in Why we do this and clicks on this "link" then the screen would update as below:

    Work instruction title
    Why do we do this?
    By following this process we decrease the company liability in case of accident.

    Step 1: Instruction step 1...


    The idea is to keep the instructions as simple as possible but provide details in an easily accessible non-disruptive way. (the instructions are already written and in some case the text in italics is several paragraphs).

    The person migrating the content is not a programmer. Is there an easy way for them to put this type of interaction into a document using RadEditor?

    Thanks in advance.
  2. Rumen
    Admin
    Rumen avatar
    14361 posts

    Posted 06 Mar 2013 Link to this post

    Hello,

    RadEditor does not offer the requested functionality and it will be hard to implement it because its implementation will require JavaScript coding. Due to security reason some of the browsers do not allow script execution in the content area of the editable iframe elements. The content area of RadEditor is an editable iframe and this limitation applies to it too.

    Best 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.
  3. Jocelyn
    Jocelyn avatar
    4 posts
    Member since:
    Mar 2013

    Posted 06 Mar 2013 Link to this post


    Thank you. Ruman for your response. I'm not looking to make a functionality requests but it is useful to understand why it won't work.

    I have a couple of follow up questions.

    Our audience is company employees and the standard browser will be IE9. Do you know if JavaScript in iframe elements works in IE9?

    Irregardless, would it be possible to implement a CSS3 solution in RadEditor? For example defining styles similar to those in this tutorial http://tympanus.net/Tutorials/CSS3Accordion/index.html and then getting authors to apply them? 

    Thanks in advance,
    Jocelyn
  4. Rumen
    Admin
    Rumen avatar
    14361 posts

    Posted 11 Mar 2013 Link to this post

    Hello,

    The content area of RadEditor is an editable div/iframe which uses the Rich Text Editing engine of the used browser to provide HTML rendering and editing abilities. I tested the provided CSS3 based accordion control in RadEditor and in an editable div and I noticed that it does not work in it, which means that the browser does not support it. I have attached the test page so that you can review and test it.

    If you are able to implement a properly working solution for your scenario in an editable div (<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">set here the accordeon code</div>) or iframe element, it would be possible to integrate it in RadEditor too.


    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.
  5. Jocelyn
    Jocelyn avatar
    4 posts
    Member since:
    Mar 2013

    Posted 12 Mar 2013 Link to this post


    Do the Radcontrols work in the RadEditor? The TreeView seems to do something similar. The only issue I see with it is that the interaction point is limited to the arrow. If it could be altered so that clicking "Rolling Stones" (see the demo I've linked to below), opened that node then it would work for what I'm trying to do. 

    http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/templates/defaultcs.aspx
  6. Rumen
    Admin
    Rumen avatar
    14361 posts

    Posted 14 Mar 2013 Link to this post

    Hello,

    RadEditor is an HTML/XHTML editor, but not Visual Studio for web and the requested scenario for displaying and interacting with server controls in its content area are not supported.

    Please, note that if you put a server tag in RadEditor the editor will not strip the tag, but will not render it in Design mode. The ASP.NET tags are not HTML tags and the browser is not able to visualize them. The browser cannot visualize XML Tags and when you put <asp:button> in the editor, the server-side framework will not parse the content (as it is part of the editor, not part of the page).
    So, instead of sending to the client the HTML tag <input type=button> it will send <asp:button> - which means nothing to the browser.

    The RadTreeView control animations and expand/collapse features also rely on JavaScript and jQuery.

    Best 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.
  7. Jocelyn
    Jocelyn avatar
    4 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    Hello,

    Thank-you for your reply. I just want to clarify one last thing based on your reply. I don't need these controls to be functional in design mode only once the content is "published." The articles will be written using RadEditor and some costumized styles in SharePoint and then "published" for consumption. I was assuming that you were saying the controls would not work in any state of the editor. However, in your reply below you say that it won't render in Design mode. Does that mean it could render in another mode?

    Thanks in advance.
     
  8. Rumen
    Admin
    Rumen avatar
    14361 posts

    Posted 26 Mar 2013 Link to this post

    Hi,

    RadEditor offers three view modes:
    • Design - an editable iframe, which could visualize only X/HTML tags, but not server controls
    • Html - a textarea, which can render only plain text
    • Preview - this is the iframe used in the Design mode, but disabled. As you know the standard iframe elements could not render or visualize server control, because the browser cannot run compiled .NET code, but only HTML, CSS and JavaScript code.

    Best 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