New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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

In this article