ImageEditor - Customize Built-in Dialogs

  • Crop
  • Resize
  • Add Text
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

By default, all RadImageEditor dialogs are embedded as resource files in the Telerik.Web.UI.dll file, which makes their customization harder. In order to provide an easy way to modify the ImageEditor's dialogs, the Telerik UI installation now comes with an extra folder named ImageEditorDialogs which contains the dialogs' ascx files. You can configure RadImageEditor to use the external dialog files by copying the ImageEditorDialogs folder to the root of the web site and setting the ExternalDialogsPath property to point to it, e.g.

< telerik:RadImageEditor  runat ="server"  ID ="RadImageEditor1"  ExternalDialogsPath ="~/ImageEditor/Examples/ExternalDialogsPath/ImageEditorDialogs"
ImageUrl ="~/ImageEditor/images/logo.png" />

The Crop, Resize and Add Text dialogs in the current demo are customized:

The Aspect Ratio dropdown inside the Crop dialog (~/ImageEditorDialogs/Crop.ascx) is extended with new values: 40x30px, 80x60px, 160x120px, 320x240px, etc, e.g.

<telerik:RadComboBox ID="rieAspectRatio" runat="server" AutoPostBack="false" EnableViewState="false"  CausesValidation="false" Width="140px">
    <Items>
        <telerik:RadComboBoxItem Text="40x30px" Value="40,30" />
        <telerik:RadComboBoxItem Text="80x60px" Value="80,60" />
        <telerik:RadComboBoxItem Text="160x120px" Value="160,120" />
        <telerik:RadComboBoxItem Text="320x240px" Value="320,240" />
        <telerik:RadComboBoxItem Text="640x480px" Value="640,480" />
        <telerik:RadComboBoxItem Text="800x600px" Value="800,600" />
        <telerik:RadComboBoxItem Text="1024x768px" Value="1024,768" />
        <telerik:RadComboBoxItem Text="1280x1024px" Value="1280,1024" />
        <telerik:RadComboBoxItem Text="1440x900px" Value="1440,900" />
    </Items>
</telerik:RadComboBox>

The Preset Sizes combo is hidden with style="display:none;" in the Resize dialog (~/ImageEditorDialogs/Resize.ascx), e.g.

<tr style="display:none;">
    <td class="rieRightAligned">
        <label id="lblPresetSizes" runat="server">
            Preset Sizes:</label>
    </td>
    <td colspan="2">
        <telerik:RadComboBox ID="PresetSizes" runat="server" AutoPostBack="false" EnableViewState="false"
            CausesValidation="false" Width="140px">
            <Items>
                <telerik:RadComboBoxItem Text="Original W x H" Value="original" />
                <telerik:RadComboBoxItem Text="Custom W x H" Value="custom" />
                <telerik:RadComboBoxItem Text="800x600px" Value="800,600" />
                <telerik:RadComboBoxItem Text="1024x768px" Value="1024,768" />
                <telerik:RadComboBoxItem Text="1280x1024px" Value="1280,1024" />
                <telerik:RadComboBoxItem Text="1440x900px" Value="1440,900" />
            </Items>
        </telerik:RadComboBox>
    </td>
</tr>

The Font Name list of the Add Text (~/ImageEditorDialogs/AddText.ascx) window is populated with 3 new fonts:

<telerik:RadComboBox ID="fontFamily" runat="server" AutoPostBack="false" EnableViewState="false" CausesValidation="false" Width="130px">
    <Items>
        <telerik:RadComboBoxItem Text="Arial" Value="arial" />
        <telerik:RadComboBoxItem Text="Times New Roman" Value="times new roman" />
        <telerik:RadComboBoxItem Text="Verdana" Value="verdana" />
        <telerik:RadComboBoxItem Text="Tahoma" Value="tahoma" />
        <telerik:RadComboBoxItem Text="Courier New" Value="courier new" />
        <telerik:RadComboBoxItem Text="Georgia" Value="georgia" />
        <telerik:RadComboBoxItem Text="Ms Sans Serif" Value="ms sans serif" />
    </Items>
</telerik:RadComboBox>

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • tools.xml
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ImageEditor.ExternalDialogsPath.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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 href="../../common/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-narrow">
        <telerik:RadImageEditor RenderMode="Lightweight" runat="server" ID="RadImageEditor1" ExternalDialogsPath="~/ImageEditor/Examples/ExternalDialogsPath/ImageEditorDialogs" ToolsFile="tools.xml" ImageUrl="~/ImageEditor/images/logo.png" Width="490" Height="315px" />
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?