radPanelbar skinobject

RadPanelbar integration manual

DotNetNuke Integration Manual

(Special thanks to Jay Mathis and Andreas Hxyer for their support)

This guide will explain how to integrate RadPanelbar in the DotNetNuke Portal. It assumes that you have DotNetNuke installed.

Step 1 - Installation

If you do not have the RadPanelbar skinobject yet, download the archive from your Client.Net account.

1. Unpack the archive in a folder of your choice. You should have the following files - Telerik.DNN.SkinObjects.Panelbar.zip, Telerik-RadPanelbar.zip, a folder src, and this document.

2. If you have purchased a Developer license, then you need to open the Telerik.SkinObjects.Panelbar.zip archive and replace the RadPanelbar.dll file with the one from your developer installation(usually from C:\Program Files\telerik\RadPanelbar3.0\bin\).

3. Open you browser and point it to the DotNetNuke portal. Log in with a SuperUser account(host). Go to the panelbar Host>Module Definitions. From the bottom of the page click on Upload New Module. Point to the Telerik.DNN.SkinObjects.Panelbar.zip file, click Add and then click Upload New File.

4. Go to the skins page(Admin>Skins or Host>Skins) and click on the Upload Skin link located near the bottom of the page. Select the skin you will use with RadPanelbar or select the sample skin that comes with the RadPanelbar skinobject - Telerik-ra.d.panelbar.zip. Click Add and then Upload New File. After the skin installation is complete you can go back to the Skins page and preview/apply the new skin.

5. Congratulations! You have successfully integrated RadPanelbar in your DotNetNuke project.

Step 2 - Customization

Customizing RadPanelbar after its integration in DNN can become a bit more difficult than what you are used to, since there is no XML definition file for the structure of the panelbar. The items are generated dynamically in order to reflect all page changes in the DNN panelbar structure. This brings a problem for people who are used to tweaking the XML file for best results. However we tried to minimize this problem by exposing as many properties as possible in the skinobject. You can add those properties from the skin definition file(.ascx) or in the XML definition file for your skin. For example if you want to tell the panelbar where to look for its images you will need to set the its ImagesBaseDir property.

    If your skin file comes with a ready to use control file(.ascx) the panelbar should look something like this:
    First you should register the control:
    <%@ Register TagPrefix="dnn" TagName="RADPANELBAR" Src= "~/DesktopModules/RadPanelbar/RadPanelbar.ascx" %>

    Then you should put it somewhere in your skin:
    <dnn:RADPANELBAR runat="server" id= "dnnPANELBAR" />

    You add properties in the same way as you would do on a normal RadPanelbar:
    <dnn:RADPANELBAR runat="server" id="dnnPANELBAR" ImagesBaseDir="~/Portals/_default/Skins/myskin/Img/"/>

    If you are building skins using an HTML editor and the DNN skin parser:
    First place the RadPanelbar token([RADPANELBAR]) somewhere in your skin, then you need to add the properties to the XML file that holds information about the tokens you are using. For example:
    <Object>
      <Token>[RADPANELBAR]</Token>
      <Settings>
        <Setting>
          <Name>ImagesBaseDir</Name>
          <Value>~/Portals/_default/Skins/myskin/Img/</Value>
        </Setting>
      </Settings>
    </Object>

Step 3 - Skinning Whitepaper

A RadPanelbar Skinning Whitepaper is also available in the this archive. Consult it for a list of all properties supported by the RadPanelbar skinobject.

Note: To use the .net2 version of this product in DNN 4.0(not applicable for 4.3) you will need to edit the Default.aspx file in the DotNetNuke main folder and remove the runat="server" attribute from the <head> tag.