Fill content through javascript in telerik editor

8 posts, 0 answers
  1. Steve Rothschild
    Steve Rothschild avatar
    6 posts
    Member since:
    Apr 2010

    Posted 02 Jul 2010 Link to this post

    Hi,
       I have a page with editor(say id = editor1) on it. On click of a button i'm opening a popup window and after selection of some text user closes that button. That selected text should come in editor. i am firing on client close event of window with the code

    function OnCloseSentenceGalleryRadWindow(oWnd, args) {
            var arg = args.get_argument();
            if (arg) {
                var Sentence = arg.Sentence;
                var ctrl = arg.ControlId;
                ctrl = document.getElementById(ctrl);
                ctrl.innerHTML = Sentence;
            }
        }
    text is coming in editor but editor changes into a Readonly text box. where i can't type of edit any thing.

    Please help to get out of it.
    waiting for early reply;
  2. Rumen
    Admin
    Rumen avatar
    13002 posts

    Posted 02 Jul 2010 Link to this post

    Hello Steve,

    RadEditor is a composite control and to get a reference to its client object you should use:

    var editor = $find("<%=RadEditorIDName.ClientID%>");

    To set text in the content you should use the editor.set_html(content) method.

    More information about RadEditor's Client-Side API is available in this article: http://www.telerik.com/help/aspnet-ajax/editor-getting-familiar-with-client-side-api.html


    Kind regards,
    Rumen
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Lahiru
    Lahiru avatar
    4 posts
    Member since:
    Jan 2014

    Posted 17 Jan 2014 Link to this post

    var editor = $find("<%=RadEditor1.ClientID%>");
    var content = document.getElementById("ctl00_body_grdGoalList_ctl" + id + "_lblGoalDesc").innerHTML;
    editor.set_html(content);


    This works fine in the IE but in firefox the editor doesn't get fill with the data and it is in the read only mode.
    I checked the view source and i think there's a difference in the way of two browsers rendering mechanism.
    Please advice how to fix this
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jan 2014 Link to this post

    Hi,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the following sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Submit" AutoPostBack="false"
        OnClientClicked="OnClientClicked1">
    </telerik:RadButton>
    <telerik:RadEditor ID="RadEditor1" runat="server">
    </telerik:RadEditor>

    JavaScript:
    <script type="text/javascript">
        function OnClientClicked1(sender, args) {
            var content = $find("<%=RadTextBox1.ClientID %>").get_value();
            var editor = $find("<%=RadEditor1.ClientID %>");
            editor.set_html(content);
            //or
            editor._contentArea.textContent = content;
        }
    </script>

    Let me know if you have any concern.
    Thanks,
    Princy.
  5. Lahiru
    Lahiru avatar
    4 posts
    Member since:
    Jan 2014

    Posted 17 Jan 2014 Link to this post

    Hi i got this error in firefox 26.0
    For the older versions it works fine.

    Telerik version 2008.35


    Also please refer the below details:

    My editor is in inside a div and div is open when i click on the grid template column image.

      <div style="display: none" id="divGoalEdit" title="Edit Goal Description">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td>
                        <telerik:RadEditor Height="185px" Width="400px" ToolsWidth="400px" EditModes="Design"
                            ID="RadEditor1" runat="server" ToolbarMode="Default" ToolsFile="~/Editor/BasicTool.xml"
                            Skin="Telerik" OnClientLoad="OnClientLoad">
                            <Content>
                            </Content>
                        </telerik:RadEditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Image ID="imgClose" runat="server" ImageUrl="Images/ok.gif" />
                        <asp:HiddenField ID="hdnRowIndex" runat="server" />
                        <asp:Label ID="counter" runat="server" CssClass="form_txtnormal"></asp:Label>
                    </td>
                </tr>
            </table>
        </div>

  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jan 2014 Link to this post

    Hi,

    Please have a look into the sample code snippet I tried which works fine at my end.

    ASPX;
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="true">
        <MasterTableView>
            <Columns>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <asp:Image ID="Image1" ImageUrl="~/Images/plus.gif" runat="server" onclick="Open();" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <div style="display: none; height: 100px;" id="divGoalEdit" title="Edit Goal Description">
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td>
                    <telerik:RadEditor Height="500px" Width="400px" ToolsWidth="400px" EditModes="Design"
                        ID="RadEditor1" runat="server" ToolbarMode="Default" Skin="Telerik">
                        <Content>
                        </Content>
                    </telerik:RadEditor>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Image ID="imgClose" runat="server" ImageUrl="Images/ok.gif" />
                    <asp:HiddenField ID="hdnRowIndex" runat="server" />
                    <asp:Label ID="counter" runat="server" CssClass="form_txtnormal"></asp:Label>
                </td>
            </tr>
        </table>
    </div>

    JavaScript:
    <script type="text/javascript">
        function Open() {
            var content = $find("<%=RadTextBox1.ClientID %>").get_value();
            var div = document.getElementById("divGoalEdit");
            div.style.display = "block";
            var editor = $find("<%=RadEditor1.ClientID %>");
            editor.set_html(content);
        }
    </script>

    Thanks,
    Princy.
  7. Lahiru
    Lahiru avatar
    4 posts
    Member since:
    Jan 2014

    Posted 19 Jan 2014 Link to this post

    Hi Princy thanks alot for your reply.

    I checked your code and it works properly. But what I have done differently is that I have used a jquery modal . So then it works properly in IE but in firefox the selected content doesn't display in the text area and also it's in read-only mode.

    I checked the view source of the editor and then i figured out that in the <html> tab under the iframe doen;t contain any content.

    code exxample :
      function EditGoalDescripton(id) {
                $('#divGoalEdit').dialog('open');
                $('#divGoalEdit').dialog({
                    bgiframe: true,
                    resizable: false,
                    height: 250,
                    width: 450,
                    draggable: true

                });

                if (id < 10) {
                    id = '0' + id;
                }

                var editor = $find("<%=RadEditor1.ClientID%>");
                var content = document.getElementById("ctl00_body_grdGoalList_ctl" + id + "_lblGoalDesc").innerHTML;
                editor.set_html(content);
     
            } 



    view source:
    here the selected text wont appear inside the <body> tag

    <td id="ctl00_body_RadEditor1Center" class="rade_contentCell" valign="top" style="height:100%;">
    <textarea id="ctl00_body_RadEditor1" style="display:none;" cols="20" rows="4" name="ctl00$body$RadEditor1"></textarea>
    <iframe frameborder="0" src="javascript:'<html></html>';" style="width: 100%; margin: 0px; padding: 0px; height: 100%;">
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>
    </iframe>
    </td>

  8. Lahiru
    Lahiru avatar
    4 posts
    Member since:
    Jan 2014

    Posted 20 Jan 2014 Link to this post

    Hi Princy,

    Thank a lot for your time spent.

    I finally solved the issue using one of your other posts.I had to paste the below code when the dialog loads

    var editor = $find("<%=RadEditor1.ClientID%>");
    editor.onParentNodeChanged();

Back to Top