Move statistics module next to the design mode buttons

[msigman]

Such as in the examples in your help files: http://www.telerik.com/help/aspnet-ajax/images/DesignMode.png

[Dobromir]

Hi Matthew,

By design, RadEditor for ASP.NET AJAX has a preset positions for its system modules and does not provide built-in functionality to change their positions. Nevertheless, you can achieve the required outcome using the following JavaScript code:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args)
    {
        setTimeout(function ()
        {
            var moduleContainer = $telerik.$("#<%= RadEditor1.ClientID %>Bottom > .reModule")[0];//get reference to the Statistic Module container
            moduleContainer.parentNode.removeChild(moduleContainer);//remove the element from its current position

            var newContainer = $telerik.$(".reEditorModesCell")[0];//get reference to the Modes container
            newContainer.appendChild(moduleContainer);//place the Statistic Module container
        }, 0);
    }
</script>

Please note that this is considered as a hack and might not work with future versions of RadControls for ASP.NET AJAX. 

Regards,
Dobromir
the Telerik team

[msigman]

This works pretty well except for one thing... when the editor is first loaded it still has the extra space at the bottom.  As soon as the user resizes, the extra disappears and it looks great.  How can I fix this?

[Rumen]

Hi Mattew,

I tried to reproduce the problem using the provided by Dobromir code, but without success. You can see my test at http://screencast.com/t/donZyNqRwKM. The bottom part of the editor placed under the content area are actually the DOM Inspector and Properties modules. Am I missing something? Can you please help us to reproduce the problem?

Best regards,
Rumen
the Telerik team

[msigman]

Look at your video, the editor has 100px of extra grey space underneath it that isn't being used!  It does not look acceptable.

I have DOM inspector and all other modules disabled.

[Rumen]

Hi Matthew,

As explained in my earlier post this space is reserved for the RadEditor's modules. You can see how to hide them in the following help article: Disable or Hide Modules.

Best wishes,
Rumen
the Telerik team

[msigman]

As explained in my earlier post I've already done that.  Here is the XML file I'm using for it:

<modules>
    <module name="RadEditorStatistics" enabled="true" visible="true" />
    <module name="RadEditorDomInspector" dockingZone="Module" enabled="false" visible="false"  />
    <module name="RadEditorNodeInspector" dockingZone="Module" enabled="false" visible="false" />
    <module name="RadEditorDiagnostics" dockingZone="Module" enabled="false" visible="false" />
    <module name="RadEditorHtmlInspector" dockingZone="Module" enabled="false" visible="false"  />
</modules>

Here are some screenshots showing exactly what I am seeing on my end.  The "extra_space.jpg" shows what it looks like when the page is first rendered.

The "fixed.jpg" shows what it looks after after I resize it or click on the highlighted corner.  This screenshot is what I'd like it to look like when it is first rendered.

Thanks.

[Rumen]

Hi,

Thank you for the detail that you use a toolsfile.

I was able to solve the problem by setting

dockingzone="bottom"

in the following tag

<module name="RadEditorStatistics" dockingzone="bottom" enabled="true" visible="true" />

You can see my test at: http://screencast.com/t/oEIFuJcVmD.

Best regards,
Rumen
the Telerik team

[msigman]

Your video is exactly what I want to do - it looks great.  However, I made that change on my project and it did not resolve it.  I downloaded and ran your project but it gave a Javascript error: Microsoft JScript runtime error: 'parentNode' is null or not an object.

Basically when I run your project, in the rendered page I don't have any element that matches #RadEditor1Bottom > .reResizeCell.  Any ideas?

I'm running v 2010.3.1317.40

[Rumen]

Hi,

I deployed my project once again and I was able to run and test it without problem in VS2010. Can you please test the project on another machine?

You can also try to get a reference to the module using:

var moduleContainer = $telerik.$("#" + editor.get_id() + "Bottom > .reModule")[0];

Please, also make sure that the EnableResize property is not set to false.

If you unable to achieve your scenario, isolate the problem in a simple working project and send it for examination via a support ticket.

Kind regards,
Rumen
the Telerik team

[msigman]

Just to follow up on this for anyone in a similar situation: The issue was that they were running their example in "IE 7.0 Standards mode," so the XML file parsing was not being enforced as case sensitive.  When switching to the default IE 8.0 Standards mode, they were able to reproduce the issue I described.

The problem was actually just due to a small typo in the originally suggested fix, it should have been like this:

<module name="RadEditorStatistics" dockingzone="Bottom" enabled="true" visible="true" />

Note the capital "B" in "Bottom."  Thanks for your persistence with this issue, Rumen!