Editor ToolBar on Top of pdf???

[Sébastien]

I'm using a radSplitter to devise the page in two part, the top and the bottom. In the bottom pane I have a radEditor with his ToolbarMode="ShowOnFocus". My problem is this : I set the contentUrl of the top pan to a PDF document and the document is located a tn front of all the control so the toolbar of my radEditor is not visible. Is there a way that I can put the toolbar in front of it. Is suspect it might not be possible because the pdf is opened with the default program and you might not have control over this, but I'm asking anyway. Another solution that would work for me, if it is possible, would be to set ToolbarMode="PageTop" but I would like to have the toolbar on top of his pane, not the top of the page.

I have attached an image showing the behavior of the radEditor when it has focus.

If anyone have a solution.

Thanks,
Sébastien

[Sébastien]

Attached file

[Rumen]

Hi Sébastien,

The problem is due to that the PDF viewer is a windowed object. This type of objects are always positioned over the DHTML elements like the RadEditor toolbar.

Here is an example demonstrating how to get a reference to the PageTop toolbar object and manipulate and position it once it is created on the page. You should use the code as a base to implement your custom scenario:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
function OnClientLoad(editor, args)
{
editor.setFocus();
setTimeout(function()
{
        var wnd = editor.get_toolAdapter().get_toolbarHolder();
        var div = wnd.get_contentElement(); //get a reference to the editor PageTop toolbar wrapper and all toolbar tools
        alert(div.outerHTML);
}, 100);
}
</script>
<telerik:RadEditor ToolbarMode="PageTop" ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>


Best wishes,
Rumen
the Telerik team

[Sébastien]

Ok, I decided to try to put the toolbar between the top of the pane and the editor. To do this I put a div element before the editor with his style.height = 0px and change this height to 44px when in edit mode (the height of my toolBar). It's working fine, but I would like to access the height of the toolBar in case the browser is resized in the same size. My problem is that the get_height() function return NaN to me. What does it mean.

var win = editor.get_toolAdapter().get_toolbarHolder();
win.set_width(pane.get_width());
var h = win.get_height() + "px";
alert(h);
divSpace.style.height = h;

The alert shows this 'NaNpx'
Of course with this argument, I get an Argument not valid exception here : 'divSpace.style.height = h;'

Any ideas!

[Rumen]

Hi Sébastien,

My suggestion is to use getWindowBounds().height method to obtain the current toolbar window height:

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        var win = editor.get_toolAdapter().get_toolbarHolder();
        win.add_show(function (oWin) {

            var h = oWin.getWindowBounds().height;
            alert(h);
        });
    }
</script>
<Telerik:RadEditor ToolbarMode="PageTop" ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
</Telerik:RadEditor>

All the best,
Rumen
the Telerik team