Docking Zones | RadEditor for ASP.NET AJAX Documentation
Edit this page

Docking Zones

The RadEditor Toolbar position can be changed by using the DockingZone attribute which can have the following values:

  • Left

  • Right

  • Top

  • Bottom

  • Module

  • The id of an external html element

A RadEditor whose toolbars are positioned in the four built-in zones

If an external element is used, it must have the following CSS classes applied: RadEditor, reCustomContainer (as of Q2 2015), <RadEditor Skin>. Here is an example with the Default skin:

<div id="outerdiv" class="RadEditor reCustomContainer Default">

You can obtain the skin name dynamically from the RadEditor object through its get_skin() JavaScript method, as shown in the Editor - Docking Zones online demo.

Here are a few examples of setting a custom toolbar position:

  • In the RadEditor declaration:


    <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server">
            <telerik:EditorToolGroup DockingZone="Left">
                <telerik:EditorTool Name="AjaxSpellCheck" />
                . . . .
  • In the ToolsFile:


    <tools enabled="true" DockingZone="Bottom">
        <tool name="Bold" />
        . . . .
  • In the code behind:


    EditorToolGroup toolgroupLeft = new EditorToolGroup(); 
    toolgroupLeft.Attributes["DockingZone"] = "Left"; 
    toolgroupLeft.Tools.Add(new EditorTool("Bold"));


    Dim toolgroupLeft As New EditorToolGroup()
    toolgroupLeft.Attributes("DockingZone") = "Left"
    toolgroupLeft.Tools.Add(New EditorTool("Bold"))

When enabling only one Edit Mode (e.g., EditModes="Design") the bottom docking zone will not render.

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article