Skip to content

Using the MOSS File Browser with the Telerik RadEditor Link Manager

August 19, 2010

It’s time once again for a lesson in Telerik customization. Let’s pretend for a moment that we want our users to be able to build links with complex attributes like anchors and mailto: links without actually having to touch the code. That’s easy with the built-in Telerik RadEditor Link Manager. Let’s also pretend that we want users to be able to browse across the entire site for pages and documents to link to if they so desire. That’s easy with the out-of-the-box Sharepoint file browser. Now, what if we want to do these things together? Not quite as easy.

The problem with doing one or the other is that Telerik’s file browser only allows access to predefined folders which creates a lot of maintenance overhead and is just less usable, whereas the Sharepoint link wizard doesn’t have an interface for mailto:, anchors, or really anything else. The solution: use the MOSS file browser with the Telerik Link Manager.

Note: To do this, you first have to be using custom EditorDialogs. These changes are all going to be in the LinkManager.ascx file.

Believe it or not, this can be achieved pretty quickly and painlessly. By viewing the source of the MOSS link builder and by modifying it to change Telerik’s code as little as possible, I came up with this:

<!--link url text box-->
<input type="text" id="LinkURL" name="LinkURL" style="width: 212px;" />
<!--end link url text box-->
</td>
<!--call link browser; the first parameter of WebForm_PostBackOptions must be the name of the link url text box; keep LinkURL-->
<td style="padding-left: 4px;">
<asp:Button ID="Button1" runat="server" Text="Browse" OnClientClick="APD_LaunchAssetPickerUseConfigCurrentUrl( 'linkBrowse' ); return false; ;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;LinkURL&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" Width="70" />
</td><!--end call link browser-->

There should already be similar code with the same name attribute and an <asp:Button> element there. Either comment them out or just replace them with this. This code renders a text box and a browse button (the button’s text is defined in the <asp:Button Text=""> attribute) that, when clicked, will call the functions I’m about to describe. I copied and pasted this javascript from the MOSS link builder as well, and changed some variable names to be more friendly.

with(new AssetPickerConfig("linkBrowse"))
{
DefaultAssetLocation='';
CurrentWebBaseUrl='\u002fsitename\u002fsubsitename';
OverrideDialogFeatures='';
OverrideDialogTitle='';
OverrideDialogDesc='';
OverrideDialogImageUrl='';
AssetUrlClientID='LinkURL';
AssetTextClientID='';

UseImageAssetPicker=false;
DefaultToLastUsedLocation=true;
DisplayLookInSection=true;

ReturnCallback = null;}

If you want, you can play around with the variables in there to customize the file browser popup. They’re named pretty clearly so I won’t go into detail about that. The one thing you probably should change is CurrentWebBaseUrl. Change that to whatever site you’d like the browser to open to, and keep in mind that a slash is represented as \u002f.

Ok, if you’re still with me, congratulations; you’re almost done. The last step is to add two script references in the <head></head> of LinkManager.ascx. They’re system scripts that Sharepoint uses for its link manager, so no installation is required. Paste these two lines in the head section:

<script type="text/javascript" src="/_layouts/1033/core.js?rev=XtdKG9EwDUHSo03sNRdLzQ%3D%3D"></script>
<script type="text/javascript" src="/_layouts/1033/AssetPickers.js?rev=pwrdokZjl1CAXjNxKmD8Ug%3D%3D"></script>

If you’re successfully completed these steps, try going to the RadEditor and inserting a link. Your new “Browse” button should be there in place of Telerik’s and if you click it, the MOSS file browser should come up! I hope that was clear enough; it’s only three steps, but they’re complicated ones. Happy Sharepointing!

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: