Pre-populate content if the bound RadEditor is empty.

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    7 posts
    Member since:
    Nov 2010

    Posted 06 May 2011 Link to this post

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

    Posted 11 May 2011 Link to this post

    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.

  3. Daniel
    Daniel avatar
    7 posts
    Member since:
    Nov 2010

    Posted 11 May 2011 Link to this post

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