RadEditor for ASP.NET
Contents
Add Custom Dialogs Send comments on this topic.
See Also
Dialogs > Add Custom Dialogs

Glossary Item Box

 

Telerik RadEditor provides a flexible mechanism for adding custom dialogs that plug directly into the undo/redo mechanism and have the Telerik RadEditor look and feel. In addition, the editor provides the developer with the ability to specify arguments to be passed to the custom dialog (this functionality is useful in scenarios, in which the dialog content should depend on the logged user).

The steps to implement a custom dialog

  1. Add a custom tool that will open the custom toolbar either through the ToolsFile.xml file or through the codebehind using the editor's Server-Side API:
  2. Through the ToolsFile.xml file:
    ToolsFile.xml Copy Code
    <tool name="CustomDialog" IconUrl="~/RadControls/Editor/Skins/Default/Buttons/Custom.gif" />
  3. Through the CodeBehind:

    C# Copy Code
    using Telerik.RadEditorUtils;
    using Telerik.WebControls.RadEditorUtils;
    ...

    ToolbarButton customButton1 =     new ToolbarButton("CustomDialog");
    customButton1.IconUrl =     "~/RadControls/Editor/Skins/Default/Buttons/Custom.gif" //specify an icon file for the button
    RadEditor1.Toolbars[0].Tools.Add(customButton1);


  4. Provide a command with the same name in the editor's global commands array, which will call the ShowDialog method, provided by the Telerik RadEditor:

    JavaScript Copy Code
    RadEditorCommandList["CustomDialog"] = function anon(commandName, editor, oTool)
    {
           editor.ShowDialog("./MyCustomDialog.html", null//arguments, 180, 80, callBackFunctionPtr, null, "Custom Dialog");
    }    ;

  5. Supply all necessary parameters to the ShowDialog method (URL, custom arguments, width, height, callback function, callback arguments, and title). You can define the dialogs argument in either of the following ways:
  6. In the ToolsFile.xml:
    ToolsFile.xml Copy Code
    <dialogParameters>
           <dialog name="CustomDialog">
               <parameter name="Param1" value="Value1" />
               <parameter name="TextToShow" value="This text was passed to the custom dialog!" />
          </dialog>
    </    dialogParameters>

  7. In the Codebehind:
    C# Copy Code
    Telerik.WebControls.RadEditorUtils.ParameterCollection paramCol = new Telerik.WebControls.RadEditorUtils.ParameterCollection();
    paramCol.Add(    new Telerik.WebControls.RadEditorUtils.Parameter("PARAM1", "Value1"));
    paramCol.Add(    new Telerik.WebControls.RadEditorUtils.Parameter("PARAM2", "Value2"));
    RadEditor1.DialogParameters.Add(    "CustomDialog", paramCol);

    VB.NET Copy Code
    Dim paramCol As New Telerik.WebControls.RadEditorUtils.ParameterCollection()
    paramCol.Add(New Telerik.WebControls.RadEditorUtils.Parameter("PARAM1", "Value1"))
    paramCol.Add(New Telerik.WebControls.RadEditorUtils.Parameter("PARAM2", "Value2"))
    RadEditor1.DialogParameters.Add("CustomDialog", paramCol)
  8. The second argument of the ShowDialog() method is meant for the dialog arguments:

    function ShowDialog (url, argument, width, height, callBackFn, callBackArgs, sCaption)

    In the example below, you can alert the arguments supplied to the dialog as follows:

     
    Main.aspx Copy Code
    <rad:RadEditor id="RadEditor1" Runat="server"></rad:RadEditor>

    <    script type="text/javascript">
    var theEditor = null;
    RadEditorCommandList["CustomDialog"] =
        function anon(commandName, editor, oTool)
    {
       var args = editor.GetDialogParameters(commandName);
       var argStr = "";
       for (var item in args)
       {
            argStr += "[" + item + "=" + args[item] + "] ";
       }
       alert ("Custom dialog was called with the following arguments: " + argStr);

      theEditor = editor;
      editor.ShowDialog(
          "./MyCustomDialog.html"
          , args //arguments
          , 180
          , 80
          , callBackFunctionPtr
          , null
          , "Custom Dialog");
    };
    </script>

  9. In the dialog you should registed the RadWindow.js file needed for the custom dialog to run properly:

    <script type="text/javascript" src="./RadControls/Editor/Scripts/7_0_1/RadWindow.js"></script>
    <!-- update the name of the scripts folder 7_0_1 if you are using version different from 7.0.1 -->

    After that you can alert the GetDialogArguments() function which returns the arguments passed to the custom dialog from the main page:

    MyCustomDialog.html Copy Code
    <script type="text/javascript" src="./RadControls/Editor/Scripts/7_0_1/RadWindow.js"></script>
    <    script type="text/javascript">
           InitializeRadWindow(); //this function is declared in the \RadControls\Editor\Scripts\<script_version>\RadWindow.js file
       alert(GetDialogArguments());
    </script>

  10. Implement a callback function that will be called when the user closes the custom dialog:
    Main.aspx Copy Code
    <script type="text/javascript">
    function callBackFunctionPtr(returnValue)
    {
            alert("This function is called when the dialog is closed");
            if (returnValue)
        {
                   theEditor.PasteHtml("<a href=\"" + returnValue.url + "\">" + returnValue.text + "</a>");
        }
    }
    </script>

     

    11. See Also