RadEditor Inline EditMode Trigger Editing on Load

4 posts, 0 answers
  1. Joshua Swain
    Joshua Swain avatar
    5 posts
    Member since:
    Aug 2008

    Posted 21 May Link to this post

    I am looking for, if it is possible, to trigger the editing of a RadEditor on load, that is in Inline Edit Mode.  The user clicking into the editable area of the RadEditor triggers the editing, showing the cursor and the toolbar.  I want to have this functionality, but on load.

    I have tried several different javascript triggers/onclicks/focus of different elements within the RadEditor, and even the RadEditor itself.  I have tried putting all these things inside of timeouts, so that happen latter in the DOM lifecycle.  All without effect.

    The closest thing I have been able to accomplish is showing the cursor inside the window by using the following javascript/jquery:

    $(editor.get_contentArea()).focus();

    This of course doesn't trigger the actual editing, as the toolbar doesn't show, nor does clicking out fire the "OnClientInlineEditCompleted" event.

    I hope someone has some ideas on how I might accomplish this functionality.

    Thanks,

    Josh

  2. Rumen
    Admin
    Rumen avatar
    13928 posts

    Posted 22 May Link to this post

    Hi Josh,

    Here is an example on how to set the focus in inline edit mode:

    <script>
        function OnClientLoad(editor, ags) {
                           
                setTimeout(function () {
                    editor.get_contentArea().focus();
                    editor.pasteHtml("");
                }, 1000);
                           
        }
    </script>
    <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" EditType="Inline" OnClientLoad="OnClientLoad">
        <Content>
    <h2>Responsive Web Design</h2>
    With <a href="http://www.telerik.com/products/aspnet-ajax.aspx">Telerik UI for ASP.NET AJAX</a> you can build applications that deliver tailored user experiences for any screen.
    <a href="http://demos.telerik.com/responsive-web-design-aspnet/default.aspx">Mobile and Responsive</a> web application, optimized for
    mobile, is your go-to resource for learning and testing the mobile
    capabilities within the UI controls and frameworks offered in the suite.<br/><br/>
    <h3>Percentage of People Accessing the Web From Mobile Devices</h3>
    <img alt="Percentage of People Accessing the Web From Mobile Devices" src="images/device-percentage.png" style="max-width: 100%;" />
    <em>Stats belong to <a href="http://www.emarketer.com/Article/Middle-East-Africa-Nearly-All-Web-Users-Mobile/1010507/2">eMarketer</a> (January 2014) </em>
        </Content>
    </telerik:RadEditor>


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Joshua Swain
    Joshua Swain avatar
    5 posts
    Member since:
    Aug 2008

    Posted 24 May Link to this post

    Rumen,

    Thanks for the help.  That worked great, and made the toolbar pop up.

    The one problem I am having is that If I don't click on anything within the control, and I just type.  Then I click elsewhere, the "OnClientInlineEditCompleted" doesn't fire.  Does this event only get added to the stack if something in the control is clicked by a user?

     

    Thanks,

    Josh

  4. Rumen
    Admin
    Rumen avatar
    13928 posts

    Posted 28 May Link to this post

    Hi Josh,

    The OnClientInlineEditCompleted event is fired after the completion of inline editing (i.e., clicking outside of the content area of an editor with enabled inline-editing). I tested the latest version with the code below and the The OnClientInlineEditCompleted event and I verified that the OnClientInlineEditCompleted event is firing after clicking outside of the content area as shown in the attached video:

            <div style="height: 500px"></div>
            <script>
                function OnClientLoad(editor, ags) {
     
                    setTimeout(function () {
                        editor.get_contentArea().focus();
                        editor.pasteHtml("");
                    }, 1000);
     
                }
     
                function OnClientInlineEditCompleted(sender) {
                    alert("The OnClientInlineEditCompleted event is fired after the completion of inline editing (i.e., clicking outside of the content area of an editor with enabled inline-editing)");
                }
            </script>
            <telerik:RadEditor RenderMode="Lightweight" OnClientInlineEditCompleted="OnClientInlineEditCompleted" runat="server" ID="RadEditor1" EditType="Inline" OnClientLoad="OnClientLoad">
                <Content>
    <h2>Responsive Web Design</h2>
    With <a href="http://www.telerik.com/products/aspnet-ajax.aspx">Telerik UI for ASP.NET AJAX</a> you can build applications that deliver tailored user experiences for any screen.
    <a href="http://demos.telerik.com/responsive-web-design-aspnet/default.aspx">Mobile and Responsive</a> web application, optimized for
    mobile, is your go-to resource for learning and testing the mobile
    capabilities within the UI controls and frameworks offered in the suite.<br/><br/>
    <h3>Percentage of People Accessing the Web From Mobile Devices</h3>
    <img alt="Percentage of People Accessing the Web From Mobile Devices" src="images/device-percentage.png" style="max-width: 100%;" />
    <em>Stats belong to <a href="http://www.emarketer.com/Article/Middle-East-Africa-Nearly-All-Web-Users-Mobile/1010507/2">eMarketer</a> (January 2014) </em>
                </Content>
            </telerik:RadEditor>


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top