Ajax triggered by custom toolbar/dialog

2 posts, 0 answers
  1. praetorion
    praetorion avatar
    9 posts
    Member since:
    May 2007

    Posted 15 Feb 2014 Link to this post

    In am having issue with ImageEditor whereby the custom dialog control trigger Ajax request event every time the toolbar is clicked. I couldn't find any reason for it to trigger the event. Any idea?

    ASPX:
    01.  <script type="text/javascript">
    02.        function add_div_event() {
    03.            $("body").on('click', '.frameImage', function (e) { selectFrame(this) });
    04.        }
    05.    </script>
    06. 
    07.</head>
    08.<body onload="add_div_event()">
    09.    <form id="form1" runat="server">
    10.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    11.        <telerik:RadAjaxManager ID="ajaxManager" runat="server" OnAjaxRequest="ajaxManager_AjaxRequest" >
    12.            <AjaxSettings>
    13.                <telerik:AjaxSetting AjaxControlID="ajaxManager">
    14.                    <UpdatedControls>
    15.                        <telerik:AjaxUpdatedControl ControlID="imgEditor"  />
    16.                    </UpdatedControls>
    17.                </telerik:AjaxSetting>
    18.            </AjaxSettings>
    19.        </telerik:RadAjaxManager>
    20.        <div id="main">
    21.            <div id="fixed-left">
    22.                <asp:Repeater ID="repeater" runat="server" EnableViewState="false">
    23.                    <ItemTemplate>
    24.                        <fieldset>
    25.                            <div class="imageWrapper">
    26.                                <div id="sig-container" class="frameImage">
    27.                                    <telerik:RadBinaryImage runat="server" ID="bImgSig" DataValue='<%#Eval("ImgMemory") %>' Width="135px"
    28.                                        AutoAdjustImageControlSize="false" ImageAlign="Middle" />
    29.                                </div>
    30.                            </div>
    31.                        </fieldset>
    32.                    </ItemTemplate>
    33.                </asp:Repeater>
    34.            </div>
    35.            <div id="edt">
    36.                <telerik:RadImageEditor ID="imgEditor" runat="server" CanvasMode="Automatic" EnableResize="true" RegisterWithScriptManager="true"
    37.                    RenderMode="Native" StatusBarMode="Bottom" ToolBarMode="Default" OnImageLoading="imgEditor_ImageLoading" Skin="Metro"
    38.                    OnDialogLoading="imgEditor_DialogLoading" ExternalDialogsPath="~/CustomDialog" OnClientImageLoad="OnClientImageLoad"
    39.                    OnImageSaving="imgEditor_ImageSaving">
    40.                    <Tools>
    41.                        <telerik:ImageEditorToolGroup>
    42.                            <telerik:ImageEditorTool CommandName="SaveFrame" Text="Save Change" />
    43.                            <telerik:ImageEditorToolSeparator />
    44.                            <telerik:ImageEditorToolStrip CommandName="Undo"></telerik:ImageEditorToolStrip>
    45.                            <telerik:ImageEditorToolStrip CommandName="Redo"></telerik:ImageEditorToolStrip>
    46.                            <telerik:ImageEditorToolSeparator />
    47.                            <telerik:ImageEditorTool CommandName="Zoom"></telerik:ImageEditorTool>
    48.                            <telerik:ImageEditorTool CommandName="Reset"></telerik:ImageEditorTool>
    49.                            <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
    50.                            <telerik:ImageEditorTool CommandName="AddText" Text="Text Input"></telerik:ImageEditorTool>
    51.                            <telerik:ImageEditorTool CommandName="Pencil" Text="Instant Sign"></telerik:ImageEditorTool>
    52.                            <telerik:ImageEditorTool CommandName="DrawCircle"></telerik:ImageEditorTool>
    53.                            <telerik:ImageEditorTool CommandName="DrawRectangle"></telerik:ImageEditorTool>
    54.                            <telerik:ImageEditorTool CommandName="Line"></telerik:ImageEditorTool>
    55.                            <telerik:ImageEditorToolSeparator />
    56.                            <telerik:ImageEditorTool CommandName="RotateLeft" />
    57.                            <telerik:ImageEditorTool CommandName="RotateRight" />
    58.                            <telerik:ImageEditorToolSeparator />
    59.                            <telerik:ImageEditorTool CommandName="CustomInsertImage" Text="Signature" ToolTip="Add your signature" />
    60.                        </telerik:ImageEditorToolGroup>
    61.                    </Tools>
    62.                </telerik:RadImageEditor>
    63.            </div>
    64.            <telerik:RadScriptBlock ID="scriptBlock" runat="server">
    65.                <script type="text/javascript">
    66.                    Telerik.Web.UI.ImageEditor.CommandList["CustomInsertImage"] = function (imgEditor, commandName, args) {
    67.                        imgEditor.executeCommand("CustomInsertImage");
    68.                        };
    69.                        Telerik.Web.UI.ImageEditor.CommandList["SaveFrame"] = function (imgEditor, commandName, args) {
    70.                            imgEditor.saveImageOnServer("", true);
    71.                        };
    72. 
    73.                        function OnClientImageLoad(sender, args) {
    74.                            var editorWidth = sender.get_width().substring(0, sender.get_width().lastIndexOf("px"));
    75.                            var editorHeight = sender.get_height().substring(0, sender.get_height().lastIndexOf("px"));
    76.                            sender.zoomImage(43, true);
    77.                        }
    78. 
    79.                        function selectFrame(obj) {
    80.                            //alert('frameselected');
    81.                            var img = obj.childNodes[1];
    82.                            //alert(img.src);
    83.                            var ajaxManager = $find("<%= ajaxManager.ClientID %>");
    84.                            ajaxManager.ajaxRequest(img.src);
    85.                        }
    86.                </script>
    87.            </telerik:RadScriptBlock>
    88.        </div>
    89.    </form>

    Somehow this command
    Telerik.Web.UI.ImageEditor.CommandList["CustomInsertImage"] = function (imgEditor, commandName, args) {
    67.                        imgEditor.executeCommand("CustomInsertImage");
    68.                        };

    always trigger OnAjaxRequest and causing the image editor to loose the image. 
  2. praetorion
    praetorion avatar
    9 posts
    Member since:
    May 2007

    Posted 15 Feb 2014 in reply to praetorion Link to this post

    Problem solved by setting ajaxManager.set_enableAJAX(false); when ajax is not required.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top