ImageEditor - RibbonBar Integration

  • Home
  • View
Item ImageZoomItem ImageZoom inItem ImageZoom out
Zoom
Item ImageRotateItem ImageRightItem ImageLeft
Rotate
Item ImageFlipItem ImageVerticallyItem ImageHorizontally
Flip
  • 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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Integration between RadRibbonBar and RadImageEditor

The ImageEditor has a rich Client-side functionality, which can be easily integrated with the RibbonBar. The following events should be handled in order to achieve a consistance behavior:

  • RibbonBar
    • OnClientButtonClicked, OnClientButtonToggled - to execute the respective ImageEditor's command
    • OnClientButtonToggling - to check if the toggling button has an already open dialog in order not to be untoggled
  • ImageEditor
    • OnClientLoad - to check if the type of the loaded image supports Opacity level
    • OnClientToolsDialogClosed - to untoggle the RibbonBar's toggle buttons (if there are any)
    • OnClientImageChanged, OnClientCommandExecuted - to set the current Undo/Redo state

There are also some ImageEditor and RibbonBar related CSS styles which have to be overwritten in order to make the both controls behave properly. You could find them in styles.css.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"
    Inherits="Telerik.Web.Examples.Controls.Integration.RibbonBarAndImageEditor.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link type="text/css" href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></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-wide">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" Width="792px" Skin="Office2007"
            OnClientButtonClicked="RibbonBar_ExecuteCommand" OnClientButtonToggled="RibbonBar_ExecuteCommand"
            OnClientButtonToggling="RibbonBar_OnClientButtonToggling" OnClientLoad="ribbonBar_load">
            <telerik:RibbonBarTab Text="Home">
                <telerik:RibbonBarGroup Text="Image">
                    <Items>
                        <telerik:RibbonBarToggleButton Size="Large" Value="Save" Text="Save" ImageUrl="icons/home/save.png" />
                        <telerik:RibbonBarToggleButton Size="Large" Value="Print" Text="Print" ImageUrl="icons/home/print.png" />
                        <telerik:RibbonBarButton Size="Small" Value="Undo" Text="Undo" ImageUrl="icons/home/undo.png" Enabled="false" DisabledImageUrl="icons/home/undo_disabled.png" />
                        <telerik:RibbonBarButton Size="Small" Value="Redo" Text="Redo" ImageUrl="icons/home/redo.png" Enabled="false" DisabledImageUrl="icons/home/redo_disabled.png" />
                        <telerik:RibbonBarButton Size="Small" Value="Reset" Text="Reset" ImageUrl="icons/home/reset.png" />
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Tools">
                    <Items>
                        <telerik:RibbonBarToggleButton Size="Large" Value="Resize" Text="Resize" ImageUrl="icons/home/resize.png" />
                        <telerik:RibbonBarToggleButton Size="Large" Value="Crop" Text="Crop" ImageUrl="icons/home/crop.png" />
                        <telerik:RibbonBarToggleButton Size="Large" Value="Opacity" Text="Opacity" ImageUrl="icons/home/opacity.png" DisabledImageUrl="icons/home/opacity_disabled.png" />
                        <telerik:RibbonBarToggleButton Size="Large" Value="AddText" Text="Text" ImageUrl="icons/home/add_text.png" />
                        <telerik:RibbonBarToggleButton Size="Large" Value="InsertImage" Text="Insert" ImageUrl="icons/home/insert_picture.png" />
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="View">
                <telerik:RibbonBarGroup Text="Zoom">
                    <Items>
                        <telerik:RibbonBarButton Size="Large" Value="Zoom" Text="Zoom" ImageUrl="icons/view/zoom.png" />
                        <telerik:RibbonBarButton Size="Large" Value="ZoomIn" Text="Zoom in" ImageUrl="icons/view/zoom_in.png" />
                        <telerik:RibbonBarButton Size="Large" Value="ZoomOut" Text="Zoom out" ImageUrl="icons/view/zoom_out.png" />
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Rotate">
                    <Items>
                        <telerik:RibbonBarToggleButton Size="Large" Value="Rotate" Text="Rotate" ImageUrl="icons/view/rotate.png" />
                        <telerik:RibbonBarButton Size="Medium" Value="RotateRight" Text="Right" ImageUrl="icons/view/rotate_right.png" />
                        <telerik:RibbonBarButton Size="Medium" Value="RotateLeft" Text="Left" ImageUrl="icons/view/rotate_left.png" />
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Flip">
                    <Items>
                        <telerik:RibbonBarToggleButton Size="Large" Value="Flip" Text="Flip" ImageUrl="icons/view/flip.png" />
                        <telerik:RibbonBarButton Size="Medium" Value="FlipVertical" Text="Vertically" ImageUrl="icons/view/flip_vertically.png" />
                        <telerik:RibbonBarButton Size="Medium" Value="FlipHorizontal" Text="Horizontally" ImageUrl="icons/view/flip_horizontally.png" />
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" Width="780px" Height="380px" Skin="Office2007"
            OnClientLoad="ImageEditor_OnClientLoad" OnClientToolsDialogClosed="ImageEditor_OnClientToolsDialogClosed"
            OnClientImageChanged="ImageEditor_OnClientImageChanged" OnClientCommandExecuted="ImageEditor_OnClientImageChanged"
            ImageUrl="~/ImageEditor/images/hay.jpg" />
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?