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

Customizing Hyperlink Manager

16 Answers 738 Views

Editor

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

16 Answers, 1 is accepted

answered on 31 Jul 2008, 06:26 AM

Hello Ricky,

Here is how to implement the requested solution:

Copy the EditorDialogs folder from the installation to the root of your application and set the ExternalDialogsPath="~/EditorDialogs", e.g.

<telerik:radeditor id="RadEditor1" ExternalDialogsPath="~/EditorDialogs" runat="server"></telerik:radeditor>

After that open the EditorDialogs\LinkManager.ascx dialog and put the following function before the closing script tag:

function ShowCustomDialog()
{
    var argument = {};
    //argument.myArg = "test";
    var callbackFunction = function(sender, args)
    {
        var oTextBox = $get("LinkURL");
        oTextBox.value = args;
    }
    var dialogOpener = Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().get_dialogOpener();
     //openUrl(url, argument, width, height, callbackFunction, callbackArgs, title, modal, behaviors, showStatusbar, showTitlebar)
    dialogOpener.openUrl("CustomLinkManager.aspx", argument, 400, 400, callbackFunction, null, "custom link manager", true);
}

In this html add a button (the red marked line) that will open the custom dialog from the hyperlink manager by firing the ShowCustomDialog method:

<li style="margin-bottom: 6px;">
       <label for="LinkURL" class="rightAlignedInputLabel" style="width: 100px;">
               <script type="text/javascript">document.write(localization["LinkUrl"]);</script>
       </label>
       <input type="text" id="LinkURL" class="l_input" />
       <input type="button" value="Open My Manager" onclick="ShowCustomDialog();return false;" />
</li>

The next step is to create the CustomLinkManager.aspx file in the root of the web application. Here is its content:

  
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomLinkManager.aspx.cs" Inherits="CustomLinkManager" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <script type="text/javascript">   
        
                function GetImageUrl(listBoxId )   
        
                {   
        
                    var listbox = document.getElementById( listBoxId );   
        
                    var url = listbox[listbox.selectedIndex].value;   
        
                    if( url != "" )   
        
                    {          
        
                         Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close(url); 
        
                    }   
        
                }   
        
                </script>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager> 
        
                <telerik:RadwindowManager id="RadWindowManager1" runat="server"></telerik:RadwindowManager> 
        
                 <TABLE id="Table1" cellSpacing="0" cellPadding="1"  border="0">   
        
                            <tr>  
        
                            <td colspan=2>Select an image:</td>  
        
                            </tr><TR>   
        
                                <TD>  
        
                                    <asp:ListBox id="ListBox1" runat="server" Width="224px" Rows="8">   
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image1.gif">Image1</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image2.gif">Image2</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image3.gif">Image3</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image4.gif">Image4</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image5.gif">Image5</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image6.gif">Image6</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image7.gif">Image7</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image8.gif">Image8</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image9.gif">Image9</asp:ListItem>  
        
                                        <asp:ListItem Value="http://images.mydomain.com/images/Image10.gif">Image10</asp:ListItem>  
        
                                    </asp:ListBox></TD>   
        
                                <TD vAlign="top">   
        
                                    <Button id="Button1" onclick="return GetImageUrl('<%=this.ListBox1.ClientID%>');" style="BORDER-RIGHT: dimgray 1px solid; BORDER-TOP: dimgray 1px solid; BORDER-LEFT: dimgray 1px solid; WIDTH: 64px; BORDER-BOTTOM: dimgray 1px solid; HEIGHT: 24px" type=button>Insert</Button></TD>   
        
                            </TR>  
        
                        </TABLE>  
        
                </form> 
        
            </body> 
        
            </html>

For your convenience I have attached a sample working project here.

Greetings,
Rumen
the Telerik team

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

answered on 22 Jan 2010, 04:35 PM

Your attached sample file is a dead link can you please supply the sample for me to use, I too would like to create a custom hyperlink manager dialogue.

Also,
I was successful in creating a custom dialog for links that can return a URL to the "LinkManager.ascx"
However
When I try to access the same custom dialog from "ImageMap.ascx" performing the same operations I get an error when I submit the form.

@ Page Language="VB" AutoEventWireup="false" CodeFile="mylinks.aspx.vb" Inherits="EditorDialogs_mylinks" %>

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml" >

head id="Head1" runat="server">

<title>Untitled Page</title>

function

GetRadWindow()

{

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function GetImageUrl(listBoxId )

{

var listbox = document.getElementById( listBoxId );

var url = listbox[listbox.selectedIndex].value;

if( url != "" )

{

Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close(url);

//getRadWindow().close(url);

}

</script>

head>

body style="margin:10px;">

<asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager>

<telerik:RadwindowManager id="RadWindowManager1" runat="server"></telerik:RadwindowManager>

<tr>

<asp:Label ID="Label1" runat="server" CssClass="normalcaption" Text="Select an existing fluid page..."></asp:Label><br /><br /></td>

</tr><TR>

<TD>

<asp:ListBox style="height:200px;" bk="return GetImageUrl('ListBox1');" id="ListBox1" runat="server" Width="100%" Rows="8">

<asp:ListItem Value="http://images.mydomain.com/images/Image1.gif">Image1</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image2.gif">Image2</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image3.gif">Image3</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image4.gif">Image4</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image5.gif">Image5</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image6.gif">Image6</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image7.gif">Image7</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image8.gif">Image8</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image9.gif">Image9</asp:ListItem>

<asp:ListItem Value="http://images.mydomain.com/images/Image10.gif">Image10</asp:ListItem>

</asp:ListBox></TD>

tr>

<tr><td align=center><br /><Button id="Button1" onclick="return GetImageUrl('ListBox1');" style="BORDER-RIGHT: dimgray 1px solid; BORDER-TOP: dimgray 1px solid; BORDER-LEFT: dimgray 1px solid; WIDTH: 64px; BORDER-BOTTOM: dimgray 1px solid; HEIGHT: 24px" type=button>Insert</Button></TD>

</TR>

</TABLE>

</form>

body>

html>

Regards,
Trevor

answered on 27 Jan 2010, 02:04 PM

Hi Trevor,

If you are using the exact same code for ImageMap dialog the error that occurs is most probably because the URL field's ID used in LinkManager dialog is different than the ImageMap's URL field.
In order to achieve the same functionality you need to modify the callback function to get the right field, e.g.:

var callbackFunction = function(sender, args) {

var oTextBox = $get("ImageMap_AreaURL");

oTextBox.value = args;

}

If this is not the case, could you please open a support ticket and attach a sample project that reproduces the problem so we can investigate it further?

In addition, the correct link for the sample project provided by Rumen in his post is:

http://www.telerik.com/ClientsFiles/089228_OpenCustomDialogFromLinkManagerAndReturnLink.zip

Sincerely yours,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 28 Jan 2010, 10:50 PM

Bingo!
That was it.

I have one last issue, the sample you supplied works great, however the custom window that opens to display my links from my database does not have a close (x) button on the top right of the window. No window bar at all for that matter. How can I alter this so that there is a close button. The reason is if the user decides they don't want to make any changes they have no way to go back without updating the url.

or even a cancel button would be good. I tried but any command to close the radwindow desires a return parameter which overwrites the url in the linkmanager.

I tried:

var

oWindow = getRadWindow();

oWindow.argument =

null;

oWindow.close();
and this updates the url to: undefined

Trevor

answered on 01 Feb 2010, 03:53 PM

Hi Trevor,

The custom dialog that is opened is a RadWindow control and you can set its behaviors using set_behaviors() client-side method. Place the following javascript code inside your custom dialog's aspx file:

window.onload = function

() 

{

var oWnd = GetRadWindow();//get reference to RadWindow

oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close);//set Close behavior to the window

}

I hope this helps.

All the best,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 02 Feb 2010, 02:46 PM

I placed your javascript code inside my custom dialog's aspx file and it does fire, however it doesn't do anything.
I still do not get a close button visible in my custom dialog.
Here is the code in the LinkManager.ascx that opens the custom dialog:

var dialogOpener = Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().get_dialogOpener();

//openUrl(url, argument, width, height, callbackFunction, callbackArgs, title, modal, behaviors, showStatusbar, showTitlebar)

dialogOpener.openUrl(

"mylinks.aspx", argument, 300, 300, callbackFunction, null, "My Links", true);
Here is the code in mylinks.aspx

html xmlns="http://www.w3.org/1999/xhtml" >

< head id="Head1" runat="server">

<title>Untitled Page</title>

window.onload =

function load_window()

{

var oWnd = getRadWindow();//get reference to RadWindow

oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close);

//set Close behavior to the window

}

function

getRadWindow()

{

if (window.radWindow)

{

return window.radWindow;

}

if (window.frameElement && window.frameElement.radWindow)

{

return window.frameElement.radWindow;

}

return null;

}

function GetImageUrl(listBoxId )

{

var listbox = document.getElementById( listBoxId );

var url = listbox[listbox.selectedIndex].value;

if( url != "" )

{

Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close(url);

//getRadWindow().close(url);

}

function exit_window( )

{

var oWindow = getRadWindow();

oWindow.argument =

null;

oWindow.close();

//Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close(Sys.EventArgs.Empty);

//getRadWindow().close('');

}

</script>

</head>

<asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager>

<telerik:RadwindowManager id="RadWindowManager1" runat="server"></telerik:RadwindowManager>

<tr>

<asp:Label ID="Label1" runat="server" CssClass="normalcaption" Text="Select an existing fluid page..." Font-Bold="True"></asp:Label><br /></td>

</tr><TR>

<TD>

<asp:ListBox style="height:200px;" bk="return GetImageUrl('ListBox1');" id="ListBox1" runat="server" Width="100%" Rows="8">

</asp:ListBox></TD>

</tr>

<Button id="Button2" onclick="return exit_window();" style="BORDER-RIGHT: dimgray 1px solid; BORDER-TOP: dimgray 1px solid; BORDER-LEFT: dimgray 1px solid; WIDTH: 64px; BORDER-BOTTOM: dimgray 1px solid; HEIGHT: 24px" type=button>Close</Button></TD>

</TR>

</TABLE>

</form>

</body> </html>

answered on 05 Feb 2010, 12:47 PM

Hi Trevor,

Please accept my apologies for missing this in my previous post. By default, the showTitlebar property of the openUrl method is false, thus the Titlebar of the new opened window is not shown and that is why you do not have a (x) for the window. The following example will open the new dialog with visible Titlebar and behaviors Move and Close (if you need only Close the value should be 4).

dialogOpener.openUrl("mylinks.aspx", argument, 300, 300, callbackFunction, null, "My Links", true, 36, false, true);

If you use this declaration of the openUrl method you can skip the window.onload function from my previous post.

Greetings,
Dobromir
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

answered on 09 Feb 2010, 01:40 PM

Hi Trevor,

The callback function registered with the openUrl() method is called whenever the dialog is closed. If it is closed using the (x) from its Titlebar, there are no arguments sent back to the callback function (args is null) and this is the reason why the URL field is updated to null.
You can check (in the callback function) if the provided arguments are correct and then apply the changes, e.g.:

var callbackFunction = function(sender, args)

{

var oTextBox = $get("LinkURL");

if(args) oTextBox.value = args;

}

All the best,
Dobromir
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.