[Solved] OnClientLoad event within user control

[MPatt]

Hi,

I have a user control that contains a details view control (DV) among other things.  Within the DV I have a template field with an Editor as the edit template.  I am trying to enforce image size constraints when a user tries to resize an image by dragging the corners etc. 

The issue is that the oncontrolselect event handler that is attached in the ClientLoad does not appear to fire.

By default the DV is in read only mode, although changing the default mode to edit doesn't appear to resolve the issue.

When the details view goes into edit mode this script appears to run.  I get the first two alerts (start and editor).  However, when I click an image and resize it by dragging the corners none of the other alerts appear and the constraints are not enforced.  On a page with the editor in a details view but NOT in a user control the code appears to be fine.

Am I missing something to get the editor oncontrolselect event to fire?

Here's the edit template code from the DV

<EditItemTemplate>
    <telerik:RadEditor ID="reTest" runat="server"
        ContentAreaCssFile="http://path/to/cc.css"
        StripFormattingOnPaste="MSWordRemoveAll"
        ToolsFile="~/App_Data/RadEditor/Tools.xml"
        OnClientPasteHtml="PasteFormatting"
        OnClientCommandExecuting="ChangeImageManager"
        OnClientLoad="OnClientLoad"
        Content='<%# Eval("Object.HTML") %>'>
        <ImageManager MaxUploadFileSize="2097152" />
        <Content><p></p></Content>
    </telerik:RadEditor>
</EditItemTemplate>

Here's the javascript that is below the editor on the page.  There are some server code tags in the js to pull values in from the code behind & web config.

function OnClientLoad(editor, args)
        {
                alert("start");

                alert(editor);
            editor.attachEventHandler("oncontrolselect", function()
            {
                alert("attachEventHandler");
                //Check if image
                window.setTimeout(function()
                {
                alert("setTimeout");
                    var selElem = editor.getSelection().getParentElement();
                    if (selElem.tagName == "IMG")
                    {
                        //Store current width and height
                        curWidth = selElem.offsetWidth;
                        curHeight = selElem.offsetHeight;

                        //Possible to resize, so attach eventhandler
                        selElem.onresizeend = function(e)
                        {
                            var resized = false;
                            alert("onresizeend");

                            if(selElem.style.pixelWidth > <%=System.Configuration.ConfigurationManager.AppSettings["editorMaxWidth"] %>)
                            {
                                selElem.style.pixelWidth =  <%=System.Configuration.ConfigurationManager.AppSettings["editorMaxWidth"]  %>
                                resized = true;
                            }
                            if(selElem.style.pixelHeight > <%=System.Configuration.ConfigurationManager.AppSettings["editorMaxHeight"] %>)
                            {
                                selElem.style.pixelHeight = <%=System.Configuration.ConfigurationManager.AppSettings["editorMaxHeight"]  %>
                                resized = true;
                            }

                            if(resized)
                            {
                                alert('Your image cannot be larger than <%=System.Configuration.ConfigurationManager.AppSettings["editorMaxHeight"]  %> x <%=System.Configuration.ConfigurationManager.AppSettings["editorMaxHeight"]  %>');
                            }

                           // selElem.onresizeend = null;//remove handler

                        };
                    }
                }, 0);
            });
        }

Thanks for any help offered,

Regards,

Matt

[Rumen]

Hi Matt,

Please, find attached the requested example on how to achieve this functionality in your user control scenario.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.