Events when drawing (before / after)?

2 posts, 0 answers
  1. Chris
    Chris avatar
    8 posts
    Member since:
    Jan 2012

    Posted 03 May 2014 Link to this post

    Hi Telerik,

    Are any events fired at the beginning/end of the drawing actions, ideally that can report back to the server in some way? I would like to be able to capture the starting and ending coordinates when a user draws a circle or rectangle using the image editor controls so that I can flag the image as altered when the Apply button is clicked, as well as write it to the database along with an explanation/annotation for explain why it was done (using this for redaction) when the image is saved.
  2. Vessy
    Vessy avatar
    2240 posts

    Posted 07 May 2014 Link to this post

    Hello Chris,

    You can access the desired coordinates in the specific drawing command's _onDrawEnd() function. In order to customize this function you will need to enable the external dialogs of the ImageEditor in the way described here:

    For example, if you want to capture the coordinates of a drawn rectangle you can extend the _onDrawEnd() function in the DrawRectangle.ascx dialog in a similar way:
    _onDrawEnd: function (drawTool, e) {
        for (var i = 0; i < this.drawTool.draggables.length; i++) {
            var position = this.drawTool.draggables[i].get_position();

    Another possible option to access these valus is to do it into the client click handler of and external button:
    <asp:Button ID="Button1" Text="Show Coordinates" OnClientClick="ShowCoordinates(); return false;"
        runat="server" />
    <div>Left handler coordinates</div>
    <span>x: </span>
    <asp:TextBox ID="leftX" runat="server" /><br />
    <span>y: </span>
    <asp:TextBox ID="leftY" runat="server" />
    <div>Right handler coordinates</div>
    <span>x: </span>
    <asp:TextBox ID="rightX" runat="server" /><br />
    <span>y: </span>
    <asp:TextBox ID="rightY" runat="server" />
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/Jellyfish.jpg">
    <script type="text/javascript">
        function ShowCoordinates() {
            var imageEditor = $find("RadImageEditor1");
            var leftHandler = 0;
            var rightHandler = 0;
            if (imageEditor.get_currentToolWidget() && imageEditor.get_currentToolWidget().get_name() == "Line") {
                leftHandler = imageEditor.get_currentToolWidget().drawTool.draggables[0].get_position();
                rightHandler = imageEditor.get_currentToolWidget().drawTool.draggables[2].get_position();
            $get("leftX").value = leftHandler.x;
            $get("leftY").value = leftHandler.y;
            $get("rightX").value = rightHandler.x;
            $get("rightY").value = rightHandler.y;

    I hope this will be helpful for you in achieving the desired scenario.

    Kind regards,

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top