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

Crop without displaying the crop popup window


Product Telerik WebForms ImageEditor for ASP.NET AJAX


Sometimes, you might want to crop an image directly without showing the crop popup window

Custom ImageEditor crop


You can achieve the desired behavior by attaching the OnClientClicked event to a button. In the event handler, get a reference to the ImageEditor and the resizable rectangle that is responsible for setting the crop dimensions to the image.

Additionally, you can remove the crop popup window by setting it's display CSS property to false.

By removing the popup window, you will also remove other ImageEditor related popup windows as well, so use with caution.

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="images.jpg">
            <telerik:ImageEditorTool CommandName="Crop" />

<telerik:RadButton runat="server" ID="RadButton1" Text="Crop" AutoPostBack="false" OnClientClicked="OnClientClicked" />
#RadImageEditor1_ToolsPanel {
    display: none !important;
function OnClientClicked(sender, args) {
    var imgEditor = $find("<%= RadImageEditor1.ClientID %>");

function collectBounds() {
    var imgEditor = $find("<%= RadImageEditor1.ClientID %>");
    var draggableResizeBox = document.querySelector(".rieDraggableResizeBox")

    if (draggableResizeBox) { // Crop only if the crop box is selected
        var xPos = parseInt("px", "")); // Parse the values to numbers
        var yPos = parseInt("px", ""));
        var width = parseInt("px", ""));
        var height = parseInt("px", ""));

        if (isNaN(xPos) || isNaN(yPos) || isNaN(width) || isNaN(height)) {
            return false;

        return new Sys.UI.Bounds(xPos, yPos, width, height); // The ImageEditor expects certain bounds to be applied when attempting to crop, and the values are from the draggableResizeBox itself
In this article