RadSplitter in a DNN skin - Skins, Themes, and Templates

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

Home

Using DNN Platf...

Skins, Themes, ...

RadSplitter in a DNN skin

3/4/2010 9:05 AM

bmu

Joined: 2/21/2010

Posts: 1

RadSplitter in a DNN skin

Hello,

I've got some problem with skin and use of Telerik controls in it.

Actually we haved a dnn portal under version 4.9.1. We have a skin with a Telerik Control, a RadSplitter. Telerik version is Q1 2009.

It's on, but with some trouble, we can't see all panes in DropDownList in edit configuration. For sample, skin contains top, left, content et bottom pane. left and content are in RadSplitter. Only top and bottom pane are visible in DropDownList.

We have a tip to configure page layout with Radsplitter. We select a skin without RadSplitter, we add modules in pane. And after we select a skin with RadSplitter. This use is not perfect, but it's on, modules which have been add in content and left module are visible.

This is code of skin for dnn in 4.9.1 and telerik Q1 2009:

    
            <%@ Control Language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="RADMENU" Src="~/DesktopModules/Telerik.SkinObjects/RadMenu.ascx" %> 
        
            <link href="<%= SkinPath %>css/classednn.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/lienspage.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/miseenforme.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/navigation.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/contenu.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/popup.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/popupPT.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/radmenu.css" rel="stylesheet" type="text/css" /> 
        
            <link href="<%= SkinPath %>css/themes.css" rel="stylesheet" type="text/css" /> 
        
            <script language="javascript" type="text/javascript"> 
        
              var isIE5 = navigator.userAgent.toUpperCase().indexOf("MSIE 5") != -1; 
        
              var targetElementID = "bottomTable", targetElementStyleOffset = 120; 
        
              var oldHandler = window.onload; 
        
              function adjustHeightOnLoad() { 
        
                adjustHeight(); 
        
                if (oldHandler != null) { 
        
                  oldHandler(); 
        
                } 
        
              } 
        
              function adjustHeight() { 
        
                if (document.getElementById) { 
        
                  var targetElement = document.getElementById(targetElementID), 
        
                    documentHeight, totalOffset; 
        
                  if (targetElement) { 
        
                    documentdocumentHeight = document.documentElement.offsetHeight; 
        
                    if (targetElement.offsetHeight < documentHeight - targetElement.offsetTop) { 
        
                      if (isIE5) 
        
                        totalOffset = targetElement.offsetTop; 
        
                      else totalOffset = targetElement.offsetParent.offsetTop + targetElementStyleOffset; 
        
                      if (documentHeight - totalOffset > 5) 
        
                        targetElement.style.height = String(documentHeight - totalOffset) + 'px'; 
        
                      else 
        
                        targetElement.style.height = "5px"; 
        
                    } 
        
                  } 
        
                } 
        
              } 
        
              window.onload = adjustHeightOnLoad; 
        
              window.onresize = adjustHeight; 
        
            </script> 
        
            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        
              <tr> 
        
                <td> 
        
                </td> 
        
              </tr> 
        
            </table> 
        
            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        
              <tr> 
        
                <td> 
        
                  <div class="conteneur_page"> 
        
                    <div class="header_bg_minimize"> 
        
                      <div class="header_minimize"> 
        
                        <div class="config_minimize"> 
        
                          <div class="logo_minimize"> 
        
                            <div class="date_minimize"> 
        
                              <dnn:CURRENTDATE runat="server" ID="dnnCURRENTDATE" CssClass="date_minimize" /> 
        
                            </div> 
        
                          </div> 
        
                          <div class="parametres_minimize"> 
        
                            <div class="conexion_minimize"> 
        
                              <dnn:USER runat="server" ID="dnnUSER" CssClass="log" /> 
        
                              &nbsp;|&nbsp;<dnn:LOGIN runat="server" ID="dnnLOGIN" CssClass="log" /> 
        
                            </div> 
        
                          </div> 
        
                        </div> 
        
                      </div> 
        
                    </div> 
        
                    <div class="menu"> 
        
                      <div class="menu_content"> 
        
                        <dnn:RADMENU runat="server" ID="dnnRADMENU" Skin="Black" Flow="Horizontal" Width="100%" /> 
        
                      </div> 
        
                    </div> 
        
                    <div class="content"> 
        
                      <div class="clear"> 
        
                      </div> 
        
                      <div id="TopPane" runat="server" class="toppane"> 
        
                      </div> 
        
                      <div class="clear"> 
        
                      </div> 
        
                      <div> 
        
                        <table width="100%" cellpadding="0" cellspacing="0" border="0"> 
        
                          <tr> 
        
                            <td> 
        
                              <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" 
        
                                OnClientLoaded="redrawLeftPane"> 
        
                                <telerik:RadPane ID="LeftPaneSplit" runat="server" Width="220px" Scrolling="X"> 
        
                                  <div id="LeftPane" runat="server" class="Leftpane"> 
        
                                  </div> 
        
                                </telerik:RadPane> 
        
                                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" Width="20px" CollapseMode="Forward" /> 
        
                                <telerik:RadPane ID="ContentPaneSplit" runat="server" Width="100%"> 
        
                                  <div id="ContentPane" runat="server" class="ContentPane"> 
        
                                  </div> 
        
                                </telerik:RadPane> 
        
                              </telerik:RadSplitter> 
        
                            </td> 
        
                          </tr> 
        
                        </table> 
        
                      </div> 
        
                      <div id="BottomPane" runat="server" class="bottompane"> 
        
                      </div> 
        
                      <table> 
        
                        <tr id="bottomTable"> 
        
                          <td> 
        
                          </td> 
        
                        </tr> 
        
                      </table> 
        
                    </div> 
        
                    <div class="footer_bg"> 
        
                      <div class="footer_static"> 
        
                        <div class="footer_txt"> 
        
                          <dnn:TERMS runat="server" ID="dnnTERMS" Text="Terms" CssClass="footer" /> 
        
                          &nbsp;|&nbsp; 
        
                          <dnn:PRIVACY runat="server" ID="dnnPRIVACY" CssClass="footer" /> 
        
                        </div> 
        
                      </div> 
        
                    </div> 
        
                  </div> 
        
                </td> 
        
              </tr> 
        
            </table> 
        
            <script language="javascript" type="text/javascript"> 
        
              function redrawLeftPane() { 
        
                document.getElementById('RAD_SPLITTER_PANE_CONTENT_dnn_LeftPane').style.height = "100%"; 
        
              } 
        
            </script>

We study the possibility to use DNN in a version 5.x. And there's a badly problem with it. I test it with DNN in a version 5.2.3, and if I use a RadSplitter, I have the message "Unhandled error loading module.

DotNetNuke.Services.Exceptions.ModuleLoadException: Cannot locate ContentPane for Skin", and modules are not visible.

This is the code for dnn 5.2.3 with telerik Q3 2009. It's the code of index_1024 in Minimal Extropy:

    
            <%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> 
        
            <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %> 
        
            <%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>  
        
            <div id="s_wrap_main"> 
        
              <div id="s_wrap_sub"> 
        
                <div class="template_style"> 
        
                  <div class="cpanel_left"> 
        
                    <div class="cpanel_right"> 
        
                      <div runat="server" id="ControlPanel"> 
        
                      </div> 
        
                    </div> 
        
                  </div> 
        
                  <div class="top_space"> 
        
                    <div class="lang_pad"> 
        
                      <dnn:LANGUAGE runat="server" ID="dnnLANGUAGE" ShowMenu="False" ShowLinks="True" /> 
        
                    </div> 
        
                  </div> 
        
                  <div class="logo_top"> 
        
                    <div class="logo_top_left"> 
        
                      <div class="logo_top_right"> 
        
                        <div class="logo_top_bg"> 
        
                        </div> 
        
                      </div> 
        
                    </div> 
        
                    <div class="logo_left"> 
        
                      <div class="logo_right"> 
        
                        <div class="logo_pad"> 
        
                          <div class="s_logo"> 
        
                            <dnn:LOGO runat="server" ID="dnnLOGO" /> 
        
                          </div> 
        
                          <div class="clear_float"> 
        
                          </div> 
        
                        </div> 
        
                      </div> 
        
                    </div> 
        
                  </div> 
        
                  <div class="menu_left"> 
        
                    <div class="menu_right"> 
        
                      <div class="menu_bg"> 
        
                        <div class="search_style"> 
        
                          <div class="search_bg"> 
        
                            <dnn:SEARCH runat="server" ID="dnnSEARCH" CssClass="ServerSkinWidget" UseDropDownList="true" 
        
                              Submit="<img src=&quot;images/search.gif&quot; border=&quot;0&quot; alt=&quot;Search&quot; /&gt;" /> 
        
                          </div> 
        
                        </div> 
        
                        <div class="menu_style"> 
        
                          <dnn:NAV runat="server" ID="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" 
        
                            ControlOrientation="Horizontal" CSSControl="mainMenu" /> 
        
                        </div> 
        
                        <div class="clear_float"> 
        
                        </div> 
        
                      </div> 
        
                    </div> 
        
                  </div> 
        
                  <div class="bread_left"> 
        
                    <div class="bread_right"> 
        
                      <div class="bread_bg"> 
        
                        <div id="bread_style"> 
        
                          <dnn:TEXT runat="server" ID="dnnTEXT" CssClass="breadcrumb_text" Text="You are here >" 
        
                            ResourceKey="Breadcrumb" /> 
        
                          &nbsp;<span> 
        
                            <dnn:BREADCRUMB runat="server" ID="dnnBREADCRUMB" CssClass="Breadcrumb" RootLevel="0" 
        
                              Separator="&nbsp;>&nbsp;" /> 
        
                          </span> 
        
                        </div> 
        
                        <div id="login_style" class="user"> 
        
                          <dnn:USER runat="server" ID="dnnUSER" CssClass="user" /> 
        
                          &nbsp;&nbsp;|&nbsp;&nbsp;<dnn:LOGIN runat="server" ID="dnnLOGIN" CssClass="user" /> 
        
                        </div> 
        
                        <div class="clear_float"> 
        
                        </div> 
        
                      </div> 
        
                    </div> 
        
                  </div> 
        
                  <div class="center_bg"> 
        
                    <div class="left_bg"> 
        
                      <div class="right_bg"> 
        
                        <div class="content_pad"> 
        
                          <div class="content_width"> 
        
                            <div runat="server" id="TopPane" class="TopPane"> 
        
                            </div> 
        
                            <table width="99%" cellpadding="0" cellspacing="0" border="0"> 
        
                              <tr> 
        
                                <td> 
        
                                  <telerik:RadSplitter ID="dnnRadSplitter" runat="server" Height="100%" EnableEmbeddedSkins="False" Width="100%" OnClientLoaded="redrawLeftPane"> 
        
                                    <telerik:RadPane ID="LeftPaneSlider" runat="server" Width="220px"  EnableEmbeddedSkins="False"> 
        
                                      <div id="LeftPane" class="LeftPane" runat="server"></div> 
        
                                    </telerik:RadPane> 
        
                                    <telerik:RadSplitBar ID="dnnRadSplitbar" runat="server" CollapseMode="Forward" EnableEmbeddedSkins="False"/> 
        
                                    <telerik:RadPane ID="dnnRadPane_Content" runat="server" Width="100%" EnableEmbeddedSkins="False"> 
        
                                      <div id="ContentPane" runat="server"></div> 
        
                                    </telerik:RadPane> 
        
                                  </telerik:RadSplitter> 
        
                                </td> 
        
                              </tr> 
        
                            </table> 
        
                            <div runat="server" id="BottomPane" class="BottomPane"> 
        
                            </div> 
        
                          </div> 
        
                          <div class="linkscontainer"> 
        
                            <dnn:LINKS runat="server" ID="dnnLINKS" CssClass="links" Level="Root" Separator="&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" /> 
        
                          </div> 
        
                        </div> 
        
                      </div> 
        
                    </div> 
        
                  </div> 
        
                  <div class="bot_left"> 
        
                    <div class="bot_right"> 
        
                      <div class="bot_bg"> 
        
                      </div> 
        
                    </div> 
        
                  </div> 
        
                  <div class="bot_pad"> 
        
                    <div id="terms_style" class="footer"> 
        
                      <dnn:PRIVACY runat="server" ID="dnnPRIVACY" CssClass="footer" /> 
        
                      &nbsp;&nbsp;|&nbsp;&nbsp;<dnn:TERMS runat="server" ID="dnnTERMS" CssClass="footer" /> 
        
                    </div> 
        
                    <div id="copy_style" class="footer"> 
        
                      <dnn:COPYRIGHT runat="server" ID="dnnCOPYRIGHT" CssClass="footer" /> 
        
                    </div> 
        
                    <div class="clear_float"> 
        
                    </div> 
        
                  </div> 
        
                </div> 
        
              </div> 
        
            </div> 
        
            <dnn:STYLES runat="server" ID="StylesIE6" Name="IE6Minus" StyleSheet="css/ie6skin.css" 
        
              Condition="LT IE 7" UseSkinPath="true" />

I also tried code inspired from this thread

Radsplitter in a dnn skin is this possible

    
            <%@ Control Language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false"  Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <div id="content_pad"> 
        
              <table cellpadding="0" cellspacing="0"> 
        
                <tr> 
        
                  <td> 
        
                    <telerik:RadSplitter ID="dnnRadSplitter" runat="server" Width="100%"  Height="100%"> 
        
                      <telerik:RadPane ID="dnnRadPane_Menu" runat="server" Width="250px"> 
        
                        <div id="LeftPane" runat="server"></div> 
        
                      </telerik:RadPane> 
        
                      <telerik:RadSplitBar ID="dnnRadSplitbar" runat="server" CollapseMode="Forward" /> 
        
                      <telerik:RadPane ID="dnnRadPane_Content" runat="server" Width="100%"> 
        
                        <div id="ContentPane" runat="server"></div> 
        
                      </telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                  </td> 
        
                </tr> 
        
              </table> 
        
            </div>

Am I wrong in implementation? If not, what is the correct way please?

I've also post here : http://www.telerik.com/community/foru...

Page 1 of 1

Home

Using DNN Platf...

Skins, Themes, ...

RadSplitter in a DNN skin

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)