Pre-populate content if the bound RadEditor is empty.

[Daniel]

 Hi Everyone,

Problem Statement:  Inside of an ASP DetailsView, I have declared a RadEditor.   The content is bound inline with the content property.   When the field is empty, I need to display a stylized (greyed out or whatever..)  set of template text.   This is to help the users properly fill in the field.   I can't seem to figure out the best way to accomplish this.  

Tried so far:   Bind the content inline, and also put the template text in the content tags within the control declaration.  

Is there something I can do in the DetailsView databind to check the contents then post the template text?  

Here is the way I am binding this now:

<asp:TemplateField HeaderText="Summary" SortExpression="Summary">
                                <EditItemTemplate>
                                    <telerik:RadEditor ID="reSummary" runat="server" Height="80" Width="500" ToolsFile="xml\RadEditorToolbars.xml"
                                        Content='<%# Bind("Summary") %>'>
                                        <CssFiles>
                                            <telerik:EditorCssFile Value="Styles/EditorContentArea.css" />
                                        </CssFiles>
                                    </telerik:RadEditor>
                                    <br />
                                    <br />
                                    <br />
                                </EditItemTemplate>
                                <InsertItemTemplate>
                                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Summary") %>'></asp:TextBox>
                                </InsertItemTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("Summary") %>'></asp:Label>
                                </ItemTemplate>
                                <ControlStyle Width="600px" />
                                <HeaderStyle HorizontalAlign="Right" VerticalAlign="Top" Width="600px" />
                            </asp:TemplateField>

Thanks,
Daniel

[Rumen]

Hello Daniel,

You can use the following client-side solution for inserting some text when the editor is empty and hiding the text when the user enters some text:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script type="text/javascript">
    var defaultContent = "Enter Some Content Here.";

    function OnClientLoad(editor, args) {
        editor.set_html(defaultContent);

        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "click", function (e) {
            if (editor.get_html(true).trim() == defaultContent) {
                editor.set_html("");
            }
        });

        $telerik.addExternalHandler(element, "blur", function (e) {
            if (editor.get_html(true).trim() == "") {
                editor.set_html(defaultContent);
            }
        });
    }
</script>

Kind regards,
Rumen
the Telerik team

[Daniel]

Thanks for the solution!    This worked for me, but I wanted to keep the original content if there was any bound.  To solve this I had to add an if clause and check the contents.  

I also noticed that when I tried to do more complicated html (namely <br /> tags and <span class=myclass> tags) it broke a bit.  I think that is because when the editor sucks up the html defaultcontent it converts it or formats it in a way that makes it not match when it is pulled for the second and third if statements.   No worries though, this does what I need! 
Cheers,
Daniel

This code block adds the "only populate the editor if the contents is empty" functionality.

<script type="text/javascript">
    var defaultContent = "Sample content here.";

    function OnClientLoad(editor, args) {
        if (editor.get_html(true).trim() == "") {
            editor.set_html(defaultContent);
        }
        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "click", function (e) {
            if (editor.get_html(true).trim() == defaultContent) {
                editor.set_html("");
            }
        });
        $telerik.addExternalHandler(element, "blur", function (e) {
            if (editor.get_html(true).trim() == "") {
                editor.set_html(defaultContent);
            }
        });


    }
</script>