Lock cropping resize

[HSLaw]

Hi,
Referring to the screencap http://upload.ximnet.com.my/huisheng/crop.png

Requirement: I want to let user crop a 300x300 thumbnail:

1. I have locked the width and height and hide the aspect ratio using JavaScript:

//This code sets the initial dimensions of the CropBox and the aspect ratio
       this._widthTxt.value = 300;
       this._heightTxt.value = 300;
       var ratio = 100 / 100; // (w/h)
       this._setCropBoxRatio(ratio);
       this._sizeRatio = ratio;
       this._updateCropBoxFromControls();

2. But if user drag the resize handler, they are still able to change the thumbnail size.
How do I lock the resize handler to prevent user from re-sizing when cropping?

3. What is the best way / correct way to load the thumbnail size from database?  Is it to use Ajax call in the ascx or there is a better method?

Thanks.

[Vessy]

Hello,

The resizing of the crop box cannot be controlled out of the box, but you can disable it by adding the following override of the draggable resize box's _createResizeExtender() method at the end of the page, containing RadImageEditor:

    <script type="text/javascript">
        Telerik.Web.UI.ImageEditor.DraggableResizeBox.prototype._createResizeExtender = function () {
            var jCropElement = $telerik.$(this._boxElement);
            var extenderProperties;

            if (currentCommand == "InsertImage") {
                extenderProperties = { move: jCropElement.find(".rieDraggableBoxMove")[0] };
            }
            else {
                extenderProperties =
                {
                    move: jCropElement.find(".rieDraggableBoxMove")[0]
                };
            }

            this._resizeExtender = new Telerik.Web.UI.ResizeExtender(this, this._boxElement, extenderProperties);
            this._overrideResizeExtenderMethods();
            this._resizeExtenderScroller = new Telerik.Web.UI.ImageEditor.ResizeExtenderScroller(this._resizeExtender);
            this._resizeExtenderScroller.add_scrolling($telerik.$.proxy(this._onScrolling, this));
        }
    </script>
</form>

Regarding your second question - this depends a lot on the exact requirements you have. Could you describe in more details the exact functionality you want to achieve?

Regards,
Vessy
Telerik

 

 

[HSLaw]

Hi,

Referring to the screen cap http://s23.postimg.org/sgipjd06x/crop_width_height.png

We need to set the width and height of the cropping size dynamically.
We have a setting page for admin to do so.
The setting page will store the value to database and then in the cropping window we need to pull them out from database and set the width and height.

Thanks.

[Vessy]

Hi,

Accessing database values from a JavaScript function is not directly related to Telerik Controls, but is a general programing task. There are several ways to do that and which one you would choose depends entirely on you and the exact setup you have - you can keep the desired values in a Server-side variables or you can refer them directly in a JavaScript function.

More information on this matter is available in various resources on Internet, for example, you could start your research from here:
Javascript Access SQl Server Database Table
passing database values to javascript function

Kind regards,
Vessy
Telerik