Inline EditType and bottom DockingZone

5 posts, 0 answers
  1. Patrick
    Patrick avatar
    19 posts
    Member since:
    May 2012

    Posted 18 Dec 2014 Link to this post

    I'm struggling with the inline EditType in the RadEditor.  I need all of the tools at the bottom of the RadEditor, mainly because if they're above the RadEditor, it goes off the top of the page.  If I set the DockingZone to Bottom, none of the controls show up at all.  (as a side note, if you set the EditMode to one type only, the tools disappear if the DockingZone is Bottom as well)  It doesn't matter if I try to form this on the ASPX or programmatically.

    Is there a way I resolve this issue?

    Thanks for any help you may have.
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 22 Dec 2014 Link to this post

    Hello Patrick,

    The Docking Zone feature of the RadEditor is available only for the Default ToolbarMode. You can examine the Docking Zones demo.

    As for the Inline editing, it can be used only with teh ShowOnFocus toolbar, and thus the docking zones cannot be used as the ShowOnFocus toolbar is a RadWidnow and it is not a part of the RadEditor control.

    Although, you can use the RadWindow's moveTo() method to dynamically reposition the toolbar wherever you need to:
    <telerik:RadEditor runat="server" ID="RadEditor1" EditType="Inline" OnClientLoad="OnClientLoad">
        <Content>
            <p>some text</p>
        </Content>
    </telerik:RadEditor>
     
    <script type="text/javascript">
        function OnClientLoad(sender, args) {
            sender.get_toolAdapter().get_window().add_show(replacePosition)
        }
     
        function replacePosition(sender, args) {
            // The values are only for example.
            // Further dynamic logic should be implemented as per to the exact requirements.
            sender.moveTo(8, 100);
        }
    </script>


    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Patrick
    Patrick avatar
    19 posts
    Member since:
    May 2012

    Posted 02 Jan 2015 in reply to Ianko Link to this post

    Ianko,
    Thanks for your reply.  What I ultimately wound up doing was this:
    function replacePosition(sender, args) {
        var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
        sender.moveTo(8, scrTop + window.innerHeight - 155);
        sender.togglePin();
    }

    That pinned the toolbar just over my footer whenever it needed to be opened, and that worked just fine.  :)

    Thanks again!
  5. Patrick
    Patrick avatar
    19 posts
    Member since:
    May 2012

    Posted 05 Jan 2015 Link to this post

    Alright, so one more issue has recently come up:  if I attempt to resize the window, the toolbar doesn't follow suit.  I was hoping that this would take care of it, in relation to the above:
    window.onresize = function() {
        var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
     
        var test = $find("<%= radAdminMsg.ClientID %>");
        if (test != null) {
            test.get_toolAdapter().get_window().moveTo(8, scrTop + window.innerHeight - 155);
        }
    }

    But the toolbar doesn't follow the window resize.  Even worse, if I resize it and you're NOT currently using the inline function, a window that looks like a popup RadWindow suddenly appears on my screen.

    Any ideas on how to correct this?  Thanks again!
  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 06 Jan 2015 Link to this post

    Hi Patrick,

    The positioning problem is due to the togglePin method, which ensures the RadWindow position and respectively the logic in the onresize handler does not affect the toolbar's position.

    as for the ghostly appearance of the RadWindow, the moveTo method always shows the RadWindow control, and in this case it is not initialized and empty. You can add additional check if the toolbar is visible and then reposition it.

    Example:
    <telerik:RadEditor runat="server" ID="RadEditor1" EditType="Inline" OnClientLoad="OnClientLoad">
        <Content>
            <p>some text</p>
        </Content>
    </telerik:RadEditor>
     
    <script type="text/javascript">
        function OnClientLoad(sender, args) {
            sender.get_toolAdapter().get_window().add_show(replacePosition)
        }
     
     
        function replacePosition(sender, args) {
            var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
            sender.moveTo(8, scrTop + window.innerHeight - 155);
            //sender.togglePin(); // togglePin instructs the radWindow to stay in place, so the window.resize handler fails.
        }
     
        window.onresize = function () {
            var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
     
            var test = $find("<%= RadEditor1.ClientID %>");
            if (test != null) {
                var isWindowVisible = test.get_toolAdapter().get_window().isVisible();
     
                if(isWindowVisible) test.get_toolAdapter().get_window().moveTo(8, scrTop + window.innerHeight - 155);
            }
        }
     
    </script>


    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017