Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

crop dialog using static width/height

5 Answers 253 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Gary Glass
Top achievements
Rank 1
Gary Glass asked on 30 Aug 2011, 07:48 AM
Hello,

I'm trying to set the crop width and height to 100 on start, and I don't want people change the crop box size.
How to make the with/height static and unchangeable?

I use the latest version 2011.2.712.40

Thanks

5 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 01 Sep 2011, 12:30 PM
Hello Gary,

You can use the following example to achieve the required customization to the Crop dialog:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <style type="text/css">
        .resizerHandle, .rieDraggableResizeHandle
        {
            display: none !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:scriptmanager id="ScriptManager" runat="server" />
    <telerik:RadImageEditor ID="theImageEditor" runat="server" ImageUrl="~/images/Vucko.jpg"
        OnClientCommandExecuted="modifyCommand">
    </telerik:RadImageEditor>
    <script type="text/javascript">
        function modifyCommand(imageEditor, args) {
            if (args.get_commandName()) {
                waitForCommand(imageEditor, args.get_commandName(), function (widget) {
                    widget._constraintBtn.set_checked(false); //stop the aspect ration constraint
                    widget.set_width(100);
                    widget.set_height(100);
                    widget._widthTxt.disabled = true;
                    widget._heightTxt.disabled = true;
                    widget._updateCropBoxFromControls();
                });
            }
        }
 
        function waitForCommand(imageEditor, commandName, callback) {
            var timer = setInterval(function () {
                var widget = imageEditor.get_currentToolWidget();
                if (widget && widget.get_name() == commandName) {
                    clearInterval(timer);
                    callback(widget);
                }
            }, 100);
        }
    </script>
    </form>
</body>
</html>

Please let us know if this helps.

All the best,
Dobromir
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
DTC
Top achievements
Rank 1
answered on 28 Dec 2011, 07:24 PM
Hello,

We try the solution and we manage to fix the initial size of the crop zone. We also hide the dialog box.
function modifyCommand(imageEditor, args) {
            if (args.get_commandName()) {
 
                //lors d'un zoomIn/zoomOut
                if (args.get_commandName() == "ZoomIn" || args.get_commandName() == "ZoomOut") { 
                 
                    //garder les mêmes dimensions du cadre
                    $(".rieDraggableResizeBox").css("width", CROP_WIDTH);
                    $(".rieDraggableResizeBox").css("height", CROP_HEIGHT);
 
                    if (args.get_commandName() == "ZoomOut") {
                        var $image = $('#RadImageEditor1_EditableImage');
                        var imgHeight = parseInt($image.css('height'));
                        var imgWidth = parseInt($image.css('width'));
 
                        //la taille du cadre ne doit pas dépasser celle de l'image
                        if ((imgHeight) <= CROP_HEIGHT || (imgWidth) <= CROP_WIDTH) {
                            $image.css({ "height": imgHeight * 2, "width": imgWidth * 2 });
                        }
                    }
                }
 
                waitForCommand(imageEditor, args.get_commandName(), function (widget) {
                    widget._constraintBtn.set_checked(false); //stop the aspect ration constraint
                    widget.set_width(CROP_WIDTH);
                    widget.set_height(CROP_HEIGHT);
                    widget._widthTxt.disabled = true;
                    widget._heightTxt.disabled = true;
                    widget._updateCropBoxFromControls();
                });
            }
        }
 
        function waitForCommand(imageEditor, commandName, callback) {
            var timer = setInterval(function () {
                var widget = imageEditor.get_currentToolWidget();
                if (widget && widget.get_name() == commandName) {
                    clearInterval(timer);
                    callback(widget);
                }
            }, 100);
        }
        function OnClientLoad(sender, eventArgs) {
            //executer la commende Crop
            var imageEditor = $telerik.toImageEditor(sender);
            imageEditor.fire("Crop", eventArgs);
 
            //cacher le dialog box
            $('#RadImageEditor1_ToolsPanel').hide();
 
            $('.rieNoStatusBar .rieStatusBar').css('height', '0');
        }

However, we need to prevent users from resizing the crop selection zone ; and I don't know how to do it.

Could you please give us the property or function to set?

Regards,
D.
0
Rumen
Telerik team
answered on 29 Dec 2011, 04:34 PM
Hi,

A day ago, we provided C# and VB.NET projects which include the external dialog files for RadImageManager and their complete source code. You can download the preferred project from here: Registering External Dialogs of RadImageEditor and customize the desired external dialogs.

Best regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Mohammed
Top achievements
Rank 2
answered on 17 Jun 2013, 01:42 AM
Hi guys,
I use the updated version from rad conteols,
How can i achieve the same points please,
Shoukd i use the old code or there is something updated,
Regards,
Mohammee
0
Dobromir
Telerik team
answered on 17 Jun 2013, 06:43 AM
Hello Mohammed,

The above solutions should work with the latest version of RadControls, however, the newer versions of ImageEditor offer OnClientDialogLoaded event that can be used to apply this modification.

Regards,
Dobromir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
ImageEditor
Asked by
Gary Glass
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
DTC
Top achievements
Rank 1
Rumen
Telerik team
Mohammed
Top achievements
Rank 2
Share this question
or