Programmatically turn off (uncheck) ImageEditor Lock Aspect Ratio checkbox

[Tracy]

I've tried

$("#lockAspectRatio").data('kendoCheckBox').value(false);

and while it does uncheck the box, the aspect ratio is still locked in the background. Seems like there's a trigger/event that's firing when someone manually checks/unchecks the box and that event does not get fired when the check is set programmatically.

How do I programmatically "uncheck" the lockAspectRatio checkbox in the ImageEditor Crop toolbar?

[Ivaylo]

Hello Tracy,

Thank you for the information provided.

You can register a "click" event listener to the "Crop" button in the toolbar to ensure that the "lockAspectRatio" checkbox is unchecked whenever the "Crop" menu is rendered in the "DOM".

$(document).ready(() => {
        $('button[title="Crop"]').on('click', disableCheckbox);
})

 

As you can see, I am getting the element by the title attribute, because the elements in the toolbar have the same classes.

For unchecking the checkbox, I used your code and it worked correctly.

function disableCheckbox() {
        var checkbox = $("#lockAspectRatio").data('kendoCheckBox');

        checkbox.value(false);
}

Furthermore, I prepared a REPL example where you can test the code and observe how its functionality:

• https://netcorerepl.telerik.com/cIOMckvl23XdADYX33 

I hope this information was helpful.

Regards,
Ivaylo
Progress Telerik

[Tracy]

That doesn't solve the issue.

Yes, it unchecks the box. However, programmatically unchecking the box DOES NOT change the aspect ratio lock in the underlying crop control.

Manually unchecking the box DOES change the aspect ratio lock in the underlying crop control. PROGRAMMATICALLY unchecking the box DOES NOT change the aspect ratio lock in the underlying crop control.

How do I programmatically change the aspect ratio lock in the crop control?

[Ivaylo]

Hello Tracy,

Thank you for the details provided.

Yes, that is correct. When the checkbox is unchecked, the aspect ratio does not unlock automatically; it requires manual intervention to trigger the change. You can use the "trigger" method to trigger the "change" handler of the checkbox.

function disableCheckbox() {
        var checkbox = $("#lockAspectRatio").data('kendoCheckBox');

        checkbox.value(false);

        checkbox.trigger('change');
}

In addition, I prepared a sample app where you can test the code and observe how it functions:

• https://netcorerepl.telerik.com/GoYMGlYB19Yi356n49 

I hope this information was helpful.

Regards,
Ivaylo
Progress Telerik