Floating toolbatr controlled by user button

3 posts, 1 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 08 Dec 2011 Link to this post

    Hi,
    We're using the RAD Editor in an application where screen space is limited. For that reason we opted to use the 'Show on focus' method of displaying/hiding the editor toolbar as it doesn't require any space at the top of the editor content area.

    Unfortunately, on some screens the toolbar obscures other screen content above the editor. If the editor was configured to use the 'Floating' toolbar mode (which allows the toolbar to be re-positioned), is there any way that displaying/hiding the toolbar can be controlled from a custom toggle image or button on the application screen? As part of this approach, we would obviously need to hide the table row at the top of the editor content area that's used for standard editor toggle button.

    Thanks, Ian
  2. Answer
    Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 12 Dec 2011 Link to this post

    Hello Ian Price,

    You can customize the code below to achieve your scenario.

    The code hides the floating toolbar button and programatically clicks it to show the floating toolbar and position it at a specified position:

    <telerik:RadEditor ID="RadEditor1" ToolbarMode="Floating" OnClientLoad="OnClientLoad" runat="server">
    </telerik:RadEditor>
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
           //hide the toggle floating toolbar button
                var button = $telerik.$(".ToggleFloatingToolbar")[0];
                button.parentNode.parentNode.parentNode.style.display = "none";
      
                if (!$telerik.isIE && button.dispatchEvent) {
                    var e = document.createEvent("MouseEvents");
      
                    e.initEvent("click", true, true);
                    button.dispatchEvent(e);
      
                }
                else {
                    button.click();
                }
                if ($telerik.$(".rwCloseButton")[0] && $telerik.$("[title='Close']")[0]) {
                    $telerik.$(".rwCloseButton")[0].style.display = "none";
                }
                var x = 400, y = 600;
                editor.get_toolAdapter().get_window().moveTo(x, y);
     
        }
    </script>


    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 15 Dec 2011 Link to this post

    Hi Rumen,
    Thanks for your reply - your script really helped. I've now extended the script so that the editor toolbar is intially hidden but can subsequently be shown/hidden by clicking a custom image (which is what I wanted to acheive). I've included the updated script below in case it's of help to others.

            <asp:Image ID="imgShowHideToolbar" runat="server" ImageUrl="~/Images/Toggle.png"/>        
            <telerik:RadEditor ID="RadEditor1" ToolbarMode="Floating" OnClientLoad="OnClientLoad" runat="server">
            </telerik:RadEditor>

            <script type="text/javascript">
                var toolbar = null;
                function OnClientLoad(editor, args) {
                    //hide the toggle floating toolbar button
                    var button = $telerik.$(".ToggleFloatingToolbar")[0];
                    button.parentNode.parentNode.parentNode.style.display = "none";
                    
                    if (!$telerik.isIE && button.dispatchEvent) {
                        var e = document.createEvent("MouseEvents");
                        e.initEvent("click", true, true);
                        button.dispatchEvent(e);
                    }
                    else {
                        button.click();
                    }                

                    if ($telerik.$(".rwCloseButton")[0] && $telerik.$("[title='Close']")[0]) {
                        $telerik.$(".rwCloseButton")[0].style.display = "none";
                    }                

                    // Save reference to editor toolbar
                    toolbar = editor;

                    // Position and initially hide the toolbar
                    var x = 100, y = 600;
                    toolbar.get_toolAdapter().get_window().moveTo(x, y);
                    hideToolbar();

                    // Add toggle function to image to show/hide toolbar
                    $('#imgShowHideToolbar').toggle(function () {
                        showToolbar();
                    }, function () {
                        hideToolbar();
                    });
                }

                function hideToolbar() {
                    toolbar.get_toolAdapter().get_window().hide();
                }

                function showToolbar() {
                    toolbar.get_toolAdapter().get_window().show();
                }
            </script>



    Best regards, Ian
Back to Top