More in this section

Forums / Developing with Sitefinity / Adding Custom Dialog to RadEditor

Adding Custom Dialog to RadEditor

2 posts, 1 answered
  1. Christine
    Christine avatar
    5 posts
    08 Jan 2010
    06 May 2010
    Link to this post
    I am attempting to add a custom dialog to the Generic Content RadEditor control for adding a special link.  I have read the articles about adding custom dialogs here and here, but am still having some difficulty.

    First I created the dialog page ~/Sitefinity/UserControls/Dialogs/AnchorLink.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AnchorLink.aspx.cs" Inherits="Sitefinity_UserControls_Dialogs_AnchorLink" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head id="Head1" runat="server">
    <title>Insert a Named Anchor Link</title>
    <link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/CustomDialogs.css" />
    <link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/RadControlsSkins.css" />
    <link type="text/css" rel="stylesheet" href="~/Sitefinity/Admin/Themes/Default/CustomDialogs.css" />
    <link type="text/css" rel="stylesheet" href="~/sitefinity/admin/Themes/Default/RadControlsSkins.css" />
    <form id="form1" runat="server">
      <div class="ctrlProps" id="div1">
        <div class="ctrlContent">
          <div class="uploadPane">
            <p class="mand">* Mandatory fields</p>
            <h2>Insert a named anchor link</h2>
            <div  class="dialogBox">
               <fieldset style="width: 214px; height: 192px">
                   * Link name: <input type="text" id="linkName"><br/>      
              <p id="actionButtons" class="button_area bottom">
                <a href="#" onclick="insertLink();" style="display: block; " class="CmsButLeft ok" id="submitBtnEnabled"><strong class="CmsButRight light">Insert</strong></a>
                <span class="cmsorlbl"> or </span>
                <a href="#" onclick="getRadWindow().close();" class="cmscclcmd">Cancel</a>
      <script type="text/javascript">
          var linkName = document.getElementById("linkName");
          function getRadWindow() {
              if (window.radWindow) {
                  return window.radWindow;
              if (window.frameElement && window.frameElement.radWindow) {
                  return window.frameElement.radWindow;
              return null;
          function insertLink()
              getRadWindow().close("<a name=\"" + linkName.innerHTML + "\"></a>");

    Then I added a reference to to custom dialog in the  ~/Sitefinity/Admin/ControlTemplates/Generic_Content/ContentEditView.ascx:
    Telerik.Web.UI.Editor.CommandList["AnchorLink"] = function(commandName, editor, args) {
                              var editorArgs = editor.getSelectedElement();
                                    var myCallbackFunction = function(sender, args) {
                                    '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/AnchorLink.aspx") %>',
                                    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,

    Then I mapped the control template in ~/App_Data/Configuration/Telerik.Sitefinity.Configuration.ControlsConfig.xml:
    <?xml version="1.0" encoding="utf-8"?> 
        <!--Provides user interface for editing a content item in the Generic Content module.-->
        <viewSettings hostType="Telerik.Cms.Engine.WebControls.Admin.ContentItemEdit`1[[Telerik.Cms.Engine.WebControls.Admin.ContentItemsView, Telerik.Cms.Engine]]" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/ContentEditView.ascx" />

    Then I added the new tool to ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:
    <tool name="AnchorLink" text="Insert a named anchor link" />

    I also added the button style to my CSS file:
    .AnchorLink, .reToolbar.Default .AnchorLink
        background-image: url(images/InsertAnchor.gif) !important;

    Then I restarted IIS. 

    I performed all the actions described above, and I do see the new icon on the editor for the Generic Content control.  However, when I click on the new icon, I get the following popup message: 'The command AnchorLink is not implemented yet.' (see attached).

    Am I missing something?

    Thanks for your help!
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    12 Sep 2017
    06 May 2010
    Link to this post
    Hello Christine,

    The template you have mapped - ~/Sitefinity/Admin/ControlTemplates/Generic_Content/ContentEditView.ascx is used when you edit an content item through GenericContent module, since the screenshot shows GenericContent control which uses different template - GenericContentDesigner.ascx which should be mapped as shown below

    <viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner"
                      layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" />

    Ivan Dimitrov
    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.
2 posts, 1 answered