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

ToolBar Mode and Position

  • Print Image
  • Save Image
  • Export Image
  • Undo
  • Redo
  • Reset Changes
  • Crop
  • Resize
  • Zoom
    • Zoom
    • Zoom In
    • Zoom Out
  • Opacity
  • Rotate
    • Rotate
    • Rotate Right by 90 deg
    • Rotate Left by 90 deg
  • Flip
    • Flip
    • Flip Vertically
    • Flip Horizontally
  • Add Text
  • Insert Image
  • Brightness/Contrast
    • Brightness/Contrast
    • Hue/Saturation
    • Blur
    • Sharpen
    • Greyscale
    • Sepia
    • Invert Colors (negative)
  • Pencil
    • Pencil
    • Line
    • DrawRectangle
    • DrawCircle
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
  • Demo Configurator
Change ToolBar Position


Change ToolBar Mode

This example shows how to configure the ToolBar of the RadImageEditor control. Two properties control the ToolBar behavior: ToolBarMode and ToolBarPosition. They should be used together.

The possible values for the ToolBarMode are:
  • Default - the toolbar is static and is positioned above the editable area by default
  • Docked - the toolbar is movable and can be docked to one of the four docking zones or left floating.

The ToolBarPosition specifies where the ToolBar will be rendered. Here are the possible values:
  • Top - the toolbar is positioned above the edited image. This is the default value.
  • Right - the toolbar is placed to the right of the editable area.
  • Bottom - the toolbar is rendered below the content area.
  • Left - the toolbar is positioned to the left of the edited image.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ImageEditor.ToolBarModes.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../common/styles.css" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg" Width="730px" Height="580px" />
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Change ToolBar Position" Size="Narrow">
                    <qsf:RadioButtonList ID="RadiosToolBarPosition" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="RadiosToolBarPosition_SelectedIndexChanged">
                        <asp:ListItem Text="Top" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Right"></asp:ListItem>
                        <asp:ListItem Text="Bottom"></asp:ListItem>
                        <asp:ListItem Text="Left"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Change ToolBar Mode" Size="Narrow">
                    <qsf:RadioButtonList ID="RadiosToolBarMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosToolBarMode_SelectedIndexChanged">
                        <asp:ListItem Text="Default" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Docked"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance