This is a migrated thread and some comments may be shown as answers.

Pre-populate content if the bound RadEditor is empty.

2 Answers 103 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 06 May 2011, 10:40 PM

 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

2 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 11 May 2011, 01:55 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Daniel
Top achievements
Rank 1
answered on 11 May 2011, 07:09 PM
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>
Tags
Editor
Asked by
Daniel
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or