default crop to unconstrained proportions

[Brad]

Hello, 

How can I change the default setting of the Crop tool from Constrained Proportions to Unconstrained Proportions.

I see many threads about defining the size, ratio and disabling buttons for easy thumbnail creation, but I just need to change the default to Unconstrained. 

[Niko]

Hello Brad,

You can easily modify the widget dialog UI from the client-side. You can check the following forum post for a similar request - http://www.telerik.com/community/forums/aspnet-ajax/image-editor/cropping.aspx.
Basically you could call the set_checked(false) to the constraint button of the crop box dialog. Here is a sample implementation:

function modifyCommand (editor, args)
{
    waitForCommand(editor, args.get_commandName(), function(widget) {
        widget._constraintBtn.set_checked(false);
    });
}

function waitForCommand(imageEditor, commandName, callback)
{
    var timer = setInterval(function()
    {
        var widget = imageEditor.get_currentToolWidget();
        if(widget && widget.get_name() == commandName)
        {
            clearInterval(timer);
            callback(widget);
        }
    }, 200);
}

where modifyCommand is an event handler of the OnClientCommandExecuted.

Hope this helps.

All the best,
Niko
the Telerik team

[Brad]

Hello Niko,

I am unable to get this code to work on my site. Can you confirm that the code posted above works for you. Attached are screenshots of what happens for me.

The code modifies the widget and changes the Constrain Proportions button to a broken link. But, dragging and dropping the Crop Selection still constrains the proportions. If I click the Constrain Proportions button with the mouse until it is a broken link, then the Crop Selection operates properly.

Brad

[Niko]

Hello Brad,

Please, accept my apologies for the incomplete example that I was given you. There are two more things that should be done in order to the dialog to restrain the constraints on the crop box. Here is a more complete solution (for brevity I have skipped the declaration of the waitForCommand method):

function modifyCommand(editor, args)
{
    if(args.get_commandName() == "Crop")
        waitForCommand(editor, "Crop", function(widget) {
            widget._constraintBtn.set_checked(false);
            widget._setCropBoxRatio(null);
            widget._sizeRatio = null;
        });
}

Hope this helps.

Kind regards,
Niko
the Telerik team

[Brad]

Thanks Niko, those extra statements worked.