This is a migrated thread and some comments may be shown as answers.

Ajax triggered by custom toolbar/dialog

1 Answer 104 Views

ImageEditor

This is a migrated thread and some comments may be shown as answers.

fca asked on 15 Feb 2014, 09:24 AM

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.

Ajax triggered by custom toolbar/dialog

1 Answer, 1 is accepted