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

Keyboard Support

  • Save Image
  • Print Image
  • Undo
  • Redo
  • Reset Changes
  • Crop
  • Rotate Right by 90 deg
  • Rotate Left by 90 deg
  • Flip Vertically
  • Flip Horizontally
  • Zoom In
  • Zoom Out
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

Press Alt + AccessKey in IE / Chrome, Alt + Shift + AccessKey in FireFox, Shift + Esc + AccessKey in Opera, or use Tab to move to and focus the control.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on the page".

Focus

  • Alt + I focuses the control. (I is the AccessKey)

Note: The focus must be on the control in order to execute a command using its shortcut.

  • F10 - focuses the Toolbar

RadImageEditor has assigned the the following built-in shortcuts

  • Tab - navigate through toolbar buttons after it is focused
  • Esc - closes the currently focused dialog window
  • Ctrl + Z - Undo the last modification
  • Ctrl + Y - Redo the previous returned modification

Also, RadImageEditor offers the posibility to assign custom shortcuts or modify the existing one by setting the ShortCut property to the tool declaration, or using addShortCut(), removeShortCut() and setShortCut() client-side methods.

In this demo we have assigned custom keyboard shortcuts for the following commands:

  • Ctrl + P - Print
  • Ctrl + S - Save
  • Ctrl + LeftArrow - RotateLeft
  • Ctrl + RightArrow - RotateRight

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="vb" Inherits="Telerik.Web.Examples.ImageEditor.KeyboardSupport.DefaultVB" CodeFile="DefaultVB.aspx.vb"  %>

<!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" />
    <script src="scripts.js" type="text/javascript"></script>
</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-medium">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg" Width="590px" Height="430px" OnClientLoad="OnClientLoad" AccessKey="i">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="Save" IsToggleButton="true"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="Print" IsToggleButton="true"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorToolStrip CommandName="Undo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorToolStrip CommandName="Redo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorTool CommandName="Reset"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="RotateRight" ShortCut="Ctrl+Right"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="RotateLeft" ShortCut="Ctrl+Left"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="FlipVertical"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="FlipHorizontal"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="ZoomIn"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="ZoomOut"></telerik:ImageEditorTool>
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance