Create custom button in a custom control using radeditor

[Ly Hung]

Version: RadControls for ASPNET AJAX Q1 2008.
I created a custom control (.ascx) containing a RadEditor. Like this: wucNewsCompose.ascx

<asp:UpdatePanel ID="UpdatePanelDetail" runat="server"> <ContentTemplate> <telerik:RadEditor ID="redtContentText" runat="server" Width="690px" Height="590px"

Skin="Vista" ToolsFile="~/RadControls/RadEditorTools.xml" EnableViewState="true">

<CssFiles>

<telerik:EditorCssFile Value="~/RadControls/MCWFEditorSkin/editorstyle.css" />

</CssFiles>

<Tools>

<telerik:EditorToolGroup >

<telerik:EditorTool Name="FlvVideoManager" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

<script type="text/javascript">

Telerik.Web.UI.Editor.CommandList["FlvVideoManager"] = function(commandName, editor, args)

{

var myCallbackFunction = function(sender, args)

{

editor.pasteHtml(String.format("<a href={0}>{1}</a> ", args.href, args.text))

}

};

</script>

</ContentTemplate> </asp:UpdatePanel>

I created a css file and embedded into masterpage:

<link href="../RadControls/MCWFEditorSkin/editorcustomtools.css" rel="stylesheet" type="text/css" />

The editorcustomtools.css contain:

.rade_toolbar.Vista .FlvVideoManager
{
    background-image: url('../../Flvplugin/FLVIcon.gif');
    background-repeat: no-repeat;
}

This control is loaded dynamically into page. And there is some problem:
- Icon not displayed
- When clicked the newly created custom button, an alert pop up: "The command FlvVideoManager is not implemented yet" and nothing happened.

Anyone can explained why and how to make it work well?
Thanks for your supporting.

[Rumen]

Hi Ly Hung,

Could you please, try to register your custom command javascript code with RadCodeBlock or RadScriptBlock and see whether the "The command FlvVideoManager is not implemented yet" error still persists?

In regards to the missing icon issue, please set the !important rule after the
background-image: url('../../Flvplugin/FLVIcon.gif');  value and test again, e.g.

.rade_toolbar.Vista .FlvVideoManager
{
    background-image: url('../../Flvplugin/FLVIcon.gif') !important;
    background-repeat: no-repeat;   
}

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ly Hung]

Thanks for your answer admin.
I've modified as you comment, icon display well but editor not recognize command. Here is my modified code:

<telerik:RadEditor ID="redtContentText" runat="server" Width="690px" Height="590px"
  Skin="Vista" ToolsFile="~/RadControls/RadEditorTools.xml" EnableViewState="true">
  <CssFiles>
  <telerik:EditorCssFile Value="~/RadControls/MCWFEditorSkin/editorstyle.css" />
    </CssFiles>
      <Tools>
         <telerik:EditorToolGroup>
            <telerik:EditorTool Name="FlvVideoManager" />
         </telerik:EditorToolGroup>
      </Tools>
</telerik:RadEditor>
<telerik:RadScriptBlock ID="rsbEditorCommand" runat="server">
  <script language="javascript" type="text/javascript">
     Telerik.Web.UI.Editor.CommandList["FlvVideoManager"] = function(commandName, editor, args)
        {
           var myCallbackFunction = function(sender, args)
              {
                 editor.pasteHtml(String.format("<a href={0}>{1}</a> ", args.href, args.text))
              }
        };
  </script>
</telerik:RadScriptBlock>

I've tested this code in a separate .aspx file, it work well. But in case of custom control, script is not recognized by editor (control is loaded dynamically into web page).

[Rumen]

Hi Ly,

I saw in you custom button command that you have put only a callback function but not the showExternalDialog method which calls the custom dialog. Is it possible that this is the reason for the problem on your side?

For your convenience I have attached a sample working project with an editor placed in user control loaded dynamically in an aspx page and a master page. The editor is placed in UpdatePanel and has a custom button that opens a custom link dialog.

The solution works properly on my side. Please, test it and let me know if you still experience any problems.

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ly Hung]

Hi Rumen!
Thanks for your demo! Sorry because i did not tell you detail of my solution. Here is my flow of events:

1. User request pages: i.e. www.domainname.com/Default.aspx?Page=myspecifiedpagename
2. System check for myspecifiedpagename setting in xml or database
3. System load Master page (Default.aspx). My master page contains DockingZones.
4. System load user controls into DockingZones as setting

I created solution as you recommented and it work well in normal way but in my case there's still error as I mentioned above: "the command "FlvVideoManager" not implemented yet". I guest that this problem caused by the conflict between DockingZone script and RadEditor scripts or is there something else?

Here is my code rewritten as you recommented:
UserControl EditorCompose.aspx:

<telerik:RadEditor ID="redtContentText" runat="server" Width="690px" Height="590px"
                Skin="Vista" ToolsFile="~/RadControls/RadEditorTools.xml" EnableViewState="true">
                <CssFiles>
                    <telerik:EditorCssFile Value="~/RadControls/MCWFEditorSkin/editorstyle.css" />
                </CssFiles>
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="FlvVideoManager" Text="FLV Video Manager" />
                    </telerik:EditorToolGroup>
                </Tools>
            </telerik:RadEditor>
            <telerik:RadScriptBlock ID="rsbEditorCommand" runat="server">
                <script language="javascript" type="text/javascript">
                //<![CDATA[
                Telerik.Web.UI.Editor.CommandList["FlvVideoManager"] = function(commandName, editor, args)
                {
                    var elem = editor.getSelectedElement(); //returns the selected element.

                    if (elem.tagName == "A")
                    {
                        editor.selectElement(elem);
                        argument = elem;
                    }
                    else
                    {
                      var content = editor.getSelectionHtml();
                      var link = editor.get_document().createElement("A");
                      link.innerHTML = content;
                      argument = link;
                    }

                    var FlvVideoCallbackFunction = function(sender, args)
                    {
                        editor.pasteHtml(String.format("<div style=\"float: left; text-align: center; width: 100%;\"> <span id=\"FlvFlashPlayer\" class=\"Normal\" align=\"center\"> <embed height=\"350\" width=\"420\" id=\"FlvVideoPlayer\" flashvars=\"file=..\{0}\" allowfullscreen=true quality=high name=FlvVideoPlayer src=Flvplugin/player.swf type=application/x-shockwave-flash></embed> </span> </div>", args.videopath))
                    }

                    editor.showDialog("FlvVideoManager", argument, FlvVideoCallbackFunction);
                };
                //]]>
                </script>
            </telerik:RadScriptBlock>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>

 UserControl EditorCompose.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
    {
        DialogDefinition FlvVideoManager = new DialogDefinition("~/Modules/wucFlvManager.ascx", new DialogParameters());
        FlvVideoManager.Modal = true;
        FlvVideoManager.VisibleTitlebar = true;
        FlvVideoManager.VisibleStatusbar = true;
        FlvVideoManager.Title = "FLV Video Manager";
        FlvVideoManager.Width = Unit.Pixel(710);
        FlvVideoManager.Height = Unit.Pixel(600);
        FlvVideoManager.VisibleStatusbar = false;
        redtContentText.AddDialogDefinition("FlvVideoManager", FlvVideoManager);
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = redtContentText.Content;
    }

The wucFlvManager.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="wucFlvManager.ascx.cs"
    Inherits="Modules_Common_wucFlvManager" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script type="text/javascript">
    function getRadWindow() //mandatory for the RadWindow dialogs functionality
    {
        if (window.radWindow)
        {
            return window.radWindow;
        }
        if (window.frameElement && window.frameElement.radWindow)
        {
            return window.frameElement.radWindow;
        }
        return null;
    }

    function initDialog() //called when the dialog is initialized
    {
        var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
    }

    if (window.attachEvent)
    {
        window.attachEvent("onload", initDialog);
    }
    else if (window.addEventListener)
    {
        window.addEventListener("load", initDialog, false);
    }

    function insertFlvVideo() //fires when the Insert Link button is clicked
    {
        var closeArgument = {};
        var flvPathElement = document.getElementById('<%= tbFlvVideo.ClientID %>');
        var temp = new Array();
        var flvPathSelected = flvPathElement.value;
        temp = flvPathSelected.split('/');
        var returnstring = '';
        if (temp[1] == 'Resources')
        {
            returnstring = flvPathElement.value;
        }
        else
        {
            for (var i = 2; i < temp.length; i ++)
            {
                returnstringreturnstring = returnstring + "/" +  temp[i];
            }
        }
        closeArgument.videopath = returnstring;
        getRadWindow().close(closeArgument);
    }

    function FlvVideoManagerFunction(sender, args)
    {
        var selectedItem = args.SelectedItem;
        var resultDocumentObject = args.Result;

        var txt = $get('<%= tbFlvVideo.ClientID %>');
        if (document.all)
        {
            txt.value = resultDocumentObject.outerHTML;
        }
        else
        {
            txt.value = selectedItem.getPath();
        }
    }
</script>
<telerik:dialogopener runat="server" id="FileDialogOpener">
</telerik:dialogopener>
<table border=0 cellpadding=0 cellspacing=0 width=700px>
    <tr>
        <td colspan="6" height="15px">&nbsp;</td>
    </tr>
    <tr>
        <td width="10px">&nbsp;</td>
        <td width="100px"><b>FLV Video : </b></td>
        <td><asp:TextBox runat="server" ID="tbFlvVideo" Width="380px"></asp:TextBox></td>
        <td width="120px" align=right><button onclick="$find('<%= FileDialogOpener.ClientID %>').open('FlvFileManager');return false;">Browse Flv File</button></td>
        <td width="80px" align=right><asp:Button ID="btnPreview" runat="server" Text="Preview" OnClick="btnPreview_Click" /></td>
        <td width="10px">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="6" align=center><br />
            <asp:Panel ID="pnlPreview" runat="server" Height="440px" Width="97%" BorderColor="#003333" BackColor=Gainsboro>
                <br /><br />
                <asp:Label ID="lblPreview" runat=server></asp:Label>
            </asp:Panel><br />
        </td>
    </tr>
    <tr>
        <td width="10px">&nbsp;</td>
        <td colspan="4" align=right>
            <input type="button" value="Insert Flv Video" onclick="javascript:insertFlvVideo()" />
        </td>
        <td>&nbsp;</td>
    </tr>
</table>

wucFlvManager.ascx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        FileManagerDialogParameters FlvManagerParameters = new FileManagerDialogParameters();
        FlvManagerParameters.ViewPaths = new string[] { "~/Resources" };
        FlvManagerParameters.UploadPaths = new string[] { "~/Resources" };
        FlvManagerParameters.DeletePaths = new string[] { "~/Resources" };
        FlvManagerParameters.SearchPatterns = new string[] {"*.flv"};
        FlvManagerParameters.MaxUploadFileSize = 50000000;

        DialogDefinition FlvManager = new DialogDefinition(typeof(DocumentManagerDialog), FlvManagerParameters);
        FlvManager.ClientCallbackFunction = "FlvVideoManagerFunction";
        FlvManager.Width = Unit.Pixel(694);
        FlvManager.Height = Unit.Pixel(440);

        FileDialogOpener.DialogDefinitions.Add("FlvFileManager", FlvManager);
    }

    protected void btnPreview_Click(object sender, EventArgs e)
    {
        lblPreview.Text = "<div style=\"float: left; text-align: center; width: 100%;\"> <span id=\"FlvFlashPlayer\" class=\"Normal\" align=\"center\"> <embed height=\"350\" width=\"420\" id=\"FlvVideoPlayer\" flashvars=\"file=" + tbFlvVideo.Text.Trim() +"\" allowfullscreen=true quality=high name=FlvVideoPlayer src=Flvplugin/player.swf type=application/x-shockwave-flash></embed> </span> </div>";
    }

My project working well when I load control into content place holder (I'm using JW Player - http://www.jeroenwijering.com/). but when load control into DockingZone, program raises error.

[Rumen]

Hi,

If the RadScriptBlock and RadCodeBlock solution does not work in your scenario, then please try the suggestions provided in this blog post: Using AJAX to load a usercontrol that has JavaScript declared in it.

If you are unable to solve the problem, please open a support ticket and send your project with instructions how to run it and reproduce the issue on our side. We will see what is causing the error and provide a solution.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.