crop dialog using static width/height

6 posts, 0 answers
  1. Gary Glass
    Gary Glass avatar
    4 posts
    Member since:
    Aug 2009

    Posted 30 Aug 2011 Link to this post

    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

  2. Dobromir
    Admin
    Dobromir avatar
    1629 posts
    Member since:
    Sep 2012

    Posted 01 Sep 2011 Link to this post

    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 >>

  3. DTC
    DTC avatar
    1 posts
    Member since:
    Oct 2011

    Posted 28 Dec 2011 Link to this post

    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.

  4. Rumen
    Admin
    Rumen avatar
    12597 posts
    Member since:
    Sep 2012

    Posted 29 Dec 2011 Link to this post

    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

  5. Mohammed
    Mohammed avatar
    87 posts
    Member since:
    Aug 2011

    Posted 16 Jun 2013 Link to this post

    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

  6. Dobromir
    Admin
    Dobromir avatar
    1629 posts
    Member since:
    Sep 2012

    Posted 17 Jun 2013 Link to this post

    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.

Back to Top