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
    12851 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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
  5. 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.
  6. 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>

  7. 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.
  8. 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>

  9. 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
UI for ASP.NET Ajax is Ready for VS 2017