ClientCallbackFunction not working?

[Jessica B.]

I have a RadEditor as a user control opening in a RadWindow. I have a custom dialog which is an ImageManager called from a button on the RadEditor. So far so good. The dialog opens when you click my button, and closes when you click Insert or Cancel.

But I can't get anything to happen on Insert. I'm looking at all sorts of examples and it appears that ClientCallbackFunction is what I should be focusing on. I've tried putting the JS function on the page called in the RadWindow, in the user control, and also registering it in the user control's script. All I'm trying to get it to do is alert something when the dialog closes, but nothing happens at all.

if (HasBackgroundImage)
                    {
                        string script = @"
                        <script language ='javascript'>
                        function OnClientLoad(editor)
                        {
                                var style = editor.get_contentArea().style;
                                style.backgroundImage = 'url(/UserImages/backgrounds/" + strBgImg + @")';
                                style.backgroundRepeat = 'no-repeat';
                                style.backgroundPosition = 'top right';
                        }
                        function BackgroundManagerFunction(sender, args)
                        {
                             alert('OK');

                        }
                        </script>";
                        Page.ClientScript.RegisterClientScriptBlock(GetType(), "CommentScript", script, false);
                        RadEditor1.OnClientLoad = "OnClientLoad";
                    }

The first bit of registered JS works fine. It loads the BG image on client load.

Here's the code for my custom dialog:

if (HasBackgroundImage)
                    {
                        // Custom image manager
                        Telerik.Web.UI.Editor.DialogControls.FileManagerDialogParameters backgroundFileManagerParameters = new Telerik.Web.UI.Editor.DialogControls.FileManagerDialogParameters();
                        backgroundFileManagerParameters.ViewPaths = new string[] { "~/UserImages/Backgrounds/" };
                        backgroundFileManagerParameters.UploadPaths = new string[] { "" };
                        backgroundFileManagerParameters.DeletePaths = new string[] { "" };
                        backgroundFileManagerParameters.MaxUploadFileSize = 5000000;
                        // If you don't set the following property, the default value will be used
                        //backgroundFileManagerParameters.SearchPatterns = new string[] { "*.jpg,*.gif,*.png" };
                        DialogDefinition backgroundImageManagerDialog = new DialogDefinition(typeof(Telerik.Web.UI.Editor.DialogControls.ImageManagerDialog), backgroundFileManagerParameters);
                        backgroundImageManagerDialog.ClientCallbackFunction = "BackgroundManagerFunction";
                        backgroundImageManagerDialog.Width = Unit.Pixel(680);
                        backgroundImageManagerDialog.Height = Unit.Pixel(420);
                        //If you need to customize the dialog then register the external dialog files
                        //backgroundImageManagerDialog.Parameters["ExternalDialogsPath"] = "~/AdminEditorDialogs/";
                        RadEditor1.DialogOpener.DialogDefinitions.Add("backgroundImageManager", backgroundImageManagerDialog);
                    }

That code works fine too. My dialog exists and opens as expected.

Here's my code for RadEditor1 and the rest of the stuff on my page:

<asp:Panel ID="pnlTitle" runat="server" DefaultButton="btnUpdateTitle" >
    <b>Title:</b>
    <asp:TextBox ID="txtTitle" runat="server" CssClass="textBox" Width="560px"></asp:TextBox>
    <asp:Button id="btnUpdateTitle" runat="server" CssClass="button" Text="Update Title" CausesValidation="false" OnClientClick="UpdateTitle(); return false;" />
    <br />
</asp:Panel>
<asp:Panel ID="pnlSubTitle" runat="server" DefaultButton="btnUpdateSubTitle">
    <b>Sub-Title:</b>
    <asp:TextBox ID="txtSubTitle" runat="server" CssClass="textBox" Width="560px"></asp:TextBox>
    <asp:Button id="btnUpdateSubTitle" runat="server" CssClass="button" Text="Update Sub-Title" CausesValidation="false" OnClientClick="UpdateSubTitle(); return false;" />
</asp:Panel>
<telerik:RadEditor runat="server" ID="RadEditor1" ExternalDialogsPath="~/AdminEditorDialogs"
AutoResizeHeight="false" EnableResize="false">
<ImageManager ViewPaths="~/UserImages" UploadPaths="~/UserImages" />
<Content>
</Content>
</telerik:RadEditor>
<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["BackgroundImage"] = function(commandName, editor, args)
    {
      editor.showDialog("backgroundImageManager");
    };
</script>

When I choose a file from the backgroundImageManagerDialog and click "Insert" there's no alert. The dialog closes.

I've also tried doing something other than alert, as in changing the value of a text box on the page. That doesn't happen either.

I get no JS errors. In fact, when I was first setting this up, I had the ClientCallbackFunction set to a function that didn't exist and didn't get any errors.

What am I missing?

[Dobromir]

Hi Jessica,

By design, RadEditor's built-in DialogOpener does not support adding new dialog definitions to it. That is the reason why the callback function is not fired. In order to achieve the required functionality you need to add a DialogOpener control to the page, add the needed dialog definition to it and create a custom button to the RadEditor that will open this dialog.

Similar scenario is available in the following KB article:
Using the Image and Document managers outside RadEditor

For your convenience I have attached a sample project.

Best wishes,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.