Show a DotNetNuke Module In a Telerik Window

Live Demo:  http://xsltdb.com/Telerik/RadWindow.aspx

As I have shown in many tutorial XsltDb is a good tool to use with Telerik Controls. Now I going to demonstrate how to use XsltDb to put a DotNetNuke module in a Telerik RadWindow.

The process is simple:

  1. Put the module you want to wrap into a window on the page,
  2. Under (important) the module put a new XsltDb module.

XsltDb script is following:

<xsl:text disable-output-escaping="yes"><![CDATA[
<%@ Register
   TagPrefix="telerik"
   Namespace="Telerik.Web.UI"
   Assembly="Telerik.Web.UI" %>
]]></xsl:text>

<mdo:asp xmlns:asp="asp" xmlns:telerik="telerik">
  <telerik:RadWindow ID="wnd" runat="server">
    <ContentTemplate>
      <div id="content-placeholder" />
    </ContentTemplate>
  </telerik:RadWindow>
</mdo:asp>
<script type="text/javascript">
  $("a[name=441]").next().appendTo($("#content-placeholder"));
  function showWindow()
  {
    $find("{{mdo:client-id('wnd')}}").show();
  }
</script>

<a href="javascript:showWindow()">Show Window</a>

Two lines in code above are bolded, I must clarify what they are exactly for:

  • First, we declare a RadWindow with a div placeholder inside. We put our module into the div.
  • Second, we create a script block where we find module to move and move it’s content to the placeholder inside the RadWindow.

Look at magic red 441 number. This is an ID of module to move into a window. Unfortunately, I don’t know a reliable method to extract complete module HTML. But I noticed that DNN inserts a <a name=”<ModuleID>” /> above a module. Module ID can be captured from URL when we edit module settings as …/mid/441/…

By default window is hidden. You can either create a link or button to show the window or setup a RadWindow property VisibleOnPageLoad=”true”.

Live Demo:  http://xsltdb.com/Telerik/RadWindow.aspx

Additional information about XsltDb: http://xsltdb.codeplex.com/

Advertisements

About Anton Burtsev

Develop software since 2000
This entry was posted in DotNetNuke, XsltDb. Bookmark the permalink.

2 Responses to Show a DotNetNuke Module In a Telerik Window

  1. Pingback: Tweets that mention Show a DotNetNuke Module In a Telerik Window | XsltDb – Develop For DotNetNuke With Pleasure -- Topsy.com

  2. Todd says:

    Cool blog post. Good to see some examples of using Telerik tools in DNN.

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