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

[Solved] Site Design Question

5 Answers 185 Views

Dock

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

Garry asked on 11 Oct 2007, 08:17 PM

I am currently working on moving our company Intranet to the new Prometheus controls and improving/updating it along the way. I am at the initial design phase and I am trying to figure out how to incorporate RadDock into a Master/Content Page situation. As of now I have a master page with 9 different Content zones 3 for the header, 3 for the body and 3 for the footer. Reason I have so many is that I want to be able to make the layout/design changes to the master, but still have the flexibilty to add things where I need them on my Content pages.

How RadDock comes into play is that right now I have a RadDockLayout control on the MasterPage as teh main container. I then have added RadDockZones and RadDocks to the appropriate Content areas on the pages that need them. Everything seems to work appropriatly, except I can't seem to float a RadDock after it has been docked in a zone and I have yet come to the part hwere I will need to save and load layouts. I am wondering if this will be possible since I have the RadDockLayout on my MasterPage. Is this the appropriate place for it?

Anyhow hope all of this is kind of clear and that you can offer me soem direction. Below is my current MasterPage and my current Default content page. Thanks as always!

MasterPage

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

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

<%@ Register Src="Controls/Search/Search.ascx" TagName="Search" TagPrefix="uc1" %> 

<!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">  

<link href="App_Themes/Default/CSS/Style.css" rel="stylesheet" type="text/css" /> 

<title>KCDC Intranet</title> 

</head> 

<body> 

<form id="form1" runat="server">  

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

<telerik:RadDockLayout ID="layoutDock" runat="server">  

<table id="pageHeader" cellpadding="0" cellspacing="0">  

<tr> 

<td class="headerLeft" valign="top">  

<asp:ContentPlaceHolder ID="HeaderLeftContent" runat="server">  

</asp:ContentPlaceHolder> 

</td> 

<td class="headerMiddle" valign="top">  

<asp:ContentPlaceHolder ID="HeaderMiddleContent" runat="server">  

</asp:ContentPlaceHolder> 

</td> 

<td class="headerRight" valign="top">  

<asp:ContentPlaceHolder ID="HeaderRightContent" runat="server">  

</asp:ContentPlaceHolder> 

</td> 

</tr> 

</table> 

<div id="pageLogo">  

<asp:ImageButton ID="btnLogo" runat="server" SkinID="LogoButton" OnClick="btnLogo_Click" 

BorderWidth="0px" /> 

</div> 

<div id="pageTitle">  

<asp:Label ID="labelTitle" runat="server" Text="" /> 

</div> 

<div> 

<uc1:Search ID="Search1" runat="server" /> 

</div> 

<table id="pageBody" cellpadding="0" cellspacing="0">  

<tr> 

<td class="pageLeftColumn">  

<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server">  

</asp:ContentPlaceHolder> 

</td> 

<td class="pageRightColumn">  

<asp:ContentPlaceHolder ID="RightColumnContent" runat="server">  

</asp:ContentPlaceHolder> 

</td> 

</tr> 

<tr> 

<td colspan="2">  

<table id="pageFooter" cellpadding="0" cellspacing="0">  

<tr> 

<td class="pageFooterLeft">  

<asp:ContentPlaceHolder ID="FooterLeftContent" runat="server">  

</asp:ContentPlaceHolder> 

<asp:ImageButton ID="imgXHTML" runat="server" SkinID="XHTMLButton" OnClick="imgXHTML_Click" /> 

<asp:ImageButton ID="imgCSS" runat="server" SkinID="CSSButton" OnClick="imgXHTML_Click" /> 

</td> 

<td class="pageFooterMiddle">  

<asp:ContentPlaceHolder ID="FooterMiddleContent" runat="server">  

</asp:ContentPlaceHolder> 

</td> 

<td class="pageFooterRight">  

<asp:ContentPlaceHolder ID="FooterRightContent" runat="server">  

</asp:ContentPlaceHolder> 

</td> 

</tr> 

</table> 

</td> 

</tr> 

</table> 

</telerik:RadDockLayout> 

</form> 

</body> 

</html>

Default Page

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" 

    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home Page" %> 

<%@ MasterType VirtualPath="~/MasterPage.master" %> 

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

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderLeftContent" runat="Server">  

</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="HeaderMiddleContent" runat="Server">  

</asp:Content> 

<asp:Content ID="Content3" ContentPlaceHolderID="HeaderRightContent" runat="Server">  

</asp:Content> 

<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" runat="Server">  

    <telerik:RadDockZone ID="dockZoneLeft" runat="server" Width="99%" MinHeight="400px" 

        CssClass="dockZoneLeftColumn" HighlightedCssClass="dockZoneLeftColumnHighlight" 

        Orientation="Vertical" BorderStyle="None">      

    <telerik:RadDock ID="dockKCDCNews" runat="server" Width="99%" Title="KCDC News" CssClass="dockKCDCNews" 

        DockMode="Default">  

        <ContentTemplate> 

            News Window  

        </ContentTemplate> 

    </telerik:RadDock> 

    </telerik:RadDockZone> 

</asp:Content> 

<asp:Content ID="Content5" ContentPlaceHolderID="RightColumnContent" runat="Server">  

    <telerik:RadDockZone ID="dockZoneRight" runat="server" Width="75%" MinHeight="400px" 

        CssClass="dockZoneRightColumn" HighlightedCssClass="dockZoneRightColumnHighlight" 

        Orientation="Horizontal" BorderStyle="None">  

    <telerik:RadDock ID="dockWeather" runat="server" Width="99%" CssClass="dockWeather" 

        Title="Weather Forecast" DockMode="Default">  

        <ContentTemplate> 

            Weather Window  

        </ContentTemplate> 

    </telerik:RadDock> 

    </telerik:RadDockZone> 

</asp:Content> 

<asp:Content ID="Content6" ContentPlaceHolderID="FooterLeftContent" runat="Server">  

</asp:Content> 

<asp:Content ID="Content7" ContentPlaceHolderID="FooterMiddleContent" runat="Server">  

</asp:Content> 

<asp:Content ID="Content8" ContentPlaceHolderID="FooterRightContent" runat="Server">  

</asp:Content>

5 Answers, 1 is accepted

answered on 12 Oct 2007, 01:45 PM

Master.zip

Hello Garry Clark,

1. I tried to reproduce the issue with the floating dock in a master page scenario but to no avail. I am attaching the page I tested with and it works correctly. Make sure that the body is long enough so that you can drop the dock somewhere once you take it out of the zone. You can make a test by setting style="height:100%" to the body element.

2. The approach you have taken placing RadDockLayout in the master page and the zones + docks in the content pages is correct. As long as you can handle the logic which will be slightly more sophisticated, we believe you have constructed your site's architecture well enough.

Best wishes,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 15 Oct 2007, 01:18 PM

Petya,
Thank you for your response and the sample. However I still can not get thsi to work. Only thing I can figure is that the 2 content areas in which I have placed my docking zones are inside of and abosulte positioned div tag. Could this have something to do with it? Below I have copied my CSS file so that you have the complete picture. I'm already in the process of packaging my site so that I might upload it via a Support Ticket if need be. Just let me kwno what you wish me to do. Also on a different note, with the RadLayout control being in the MasterPage I am guessing that I will simply need to create a RadLayoput object on my Content pages by doing the following Telerik.Web.UI.RadDockLayout layOut = (Telerik.Web.UI.RadDockLayout)Master.FindControl("layoutDock"); and then call its SaveLayout and LoadLayout methods. Is this correct? Again thanks for all of your help.

CSS File

body  

{  

    padding:0px;  

    margin:0px;  

    height:100%;  

    width:100%;  

}  

/*Pseudo Class Properties*/  

/*Hyperlink Formatting*/  

a:link {color: #003C83;}     /*unvisited link*/   

a:visited {color: #003C83;}   /*visited link */  

a:hover {color: #896D46;}   /* mouse over link */  

a:active {color: #896D46;}   /* selected link*/  

/*--------------------------------------------------------------------------------------*/  

/*Page Text Properties*/  

.pageText  

{  

    font-family:'Corbel Calibri Tahoma Verdana';  

}  

.headerText  

{  

    font-family:'Corbel Calibri Tahoma Verdana';  

}  

.sectionHeaderText  

{  

    font-family:'Corbel Calibri Tahoma Verdana';  

}  

.helpText  

{  

    font-family:'Corbel Calibri Tahoma Verdana';  

    font-size:small;  

    color:black;  

    padding:10px;  

}  

/*--------------------------------------------------------------------------------------*/  

/*Page Header Properties*/  

#pageHeader  

{  

    width:100%;  

    height:95px;  

    margin:0px 0px 0px 0px;  

    padding:0px 0px 0px 0px;  

    position:absolute;  

    top:0px;  

    left:0px;  

}  

.headerLeft  

{  

    width:477px;  

    position:absolute;  

    left:0px;  

    top:0px;  

}  

.headerMiddle  

{      

    background-image:url(../images/background/headerMiddleBG.png);  

    background-repeat:repeat-x;  

    width:100%;  

}  

.headerRight  

{  

    width:477px;  

    top:0px;  

    right:0px;  

    position:absolute;  

}  

/*--------------------------------------------------------------------------------------*/  

/*Page Title Properties*/  

#pageTitle  

{  

    position:absolute;  

    right:25px;  

    top:10px;  

    font-family:'Corbel Calibri Tahoma Verdana';  

    font-size:20pt;  

    color:Black;  

    visibility:hidden;  

}  

#pageLogo  

{  

    position:absolute;  

    left:10px;  

    top:2px;  

}  

/*--------------------------------------------------------------------------------------*/  

/*Page Body Properties*/  

#pageBody  

{  

    padding:0px 0px 0px 0px;  

    position:absolute;  

    top:95px;  

    left:0px;  

    margin:0px 0px 25px 0px;  

    background-color:#FFFFFF;  

    width:100%;  

    height:100%;  

}  

.pageLeftColumn  

{  

    width:225px;  

    height:100%;  

}  

.pageRightColumn  

{  

    margin:0px;  

    padding:0px;  

    height:100%      

}  

/*--------------------------------------------------------------------------------------*/  

/*Page Footer Properties*/  

#pageFooter  

{  

    height:45px;  

    width:100%;  

    background-image:url(../images/background/pageFooterBG.png);  

    background-repeat:repeat-x;  

    color:White;  

    font-family:'Corbel Calibri Tahoma Verdana';  

    margin:0px;  

    padding:0px;  

    position:absolute;  

    bottom:0px;  

    left:0px;  

}  

.pageFooterLeft  

{  

    margin:0px;  

    padding:7px 0px 0px 5px;  

}  

.pageFooterMiddle  

{  

    margin:0px;  

    padding:0px;  

}  

.pageFooterRight  

{  

    margin:0px;  

    padding:0px;  

}  

/*--------------------------------------------------------------------------------------*/  

/*SubSection Properties*/  

.subSectionHeader  

{  

}  

.subSectionBody  

{  

}  

/*--------------------------------------------------------------------------------------*/  

/*Docking Properties*/  

.dockZoneRightColumn  

{  

    background-color:Transparent;  

    border: 'none 0px transparent';  

}  

.dockZoneRightColumnHighlight  

{  

    background-color:green;  

    border:dashed 1px black;  

}  

.dockZoneLeftColumn  

{  

    background-color: transparent;  

    border: 'none 0px transparent';  

}  

.dockZoneLefttColumnHighlight  

{  

    background-color:Yellow;  

    border:dashed 1px black;  

}  

.dockWeather  

{  

}  

.dockBirthdays  

{  

}  

.dockKCDCNews  

{  

}  

.dockHUDNews  

{  

}  

.dockKnoxCityNews  

{  

}  

.dockNavigation  

{  

}  

.dockComics  

{  

}  

/*--------------------------------------------------------------------------------------*/  

/*Login Properties*/  

#loginBox  

{  

    text-align:center;  

}  

.loginCheckBox  

{  

    margin:0px;  

    padding:0px;  

}  

.loginFailureText  

{  

    text-align:center;  

    color:Red;  

}  

.loginHyperlink  

{  

    margin:0px;  

    padding:0px;  

}  

.loginInstructions  

{  

    text-align:left;  

}  

.loginLabel  

{  

    text-align:right;  

}  

.loginTextBox  

{  

    width:200px;  

}  

.loginButton  

{      

    text-align:right;  

}  

.loginTitle  

{  

    text-align:center;  

}  

#loggedInAs  

{  

    margin:0px;  

    padding:0px;  

}  

/*--------------------------------------------------------------------------------------*/  

/*Search Properties*/  

#searchBox  

{  

    color:White;  

    position:absolute;  

    top:20px;  

    right:75px;  

    font-family:'Corbel Calibri Tahoma Verdana';  

    font-size:small;  

    width:150px;  

    z-index:10;  

}  

#searchResultsBox  

{  

    margin:0px;  

    padding:0px;  

}  

.searchSummary  

{  

    margin:0px;  

    padding:0px;  

}  

.searchLink  

{  

    margin:0px;  

    padding:0px;  

}  

.searchURL  

{  

    margin:0px;  

    padding:0px;  

}  

/*--------------------------------------------------------------------------------------*/

answered on 15 Oct 2007, 03:01 PM

Hi Garry Clark,

1. I tested the float issue again placing the zones inside a div element with position:aboslute, however I was unable to reproduce any problem. Here is the code I am testing with:

<asp:scriptmanager id="ScriptManager" runat="server"> 
        </asp:scriptmanager> 
        <div style="position:absolute;border:solid 1px Red;"> 
        <telerik:raddocklayout id="RadDockLayout1" runat="server" skin="Default2006"> 
            <telerik:raddockzone id="RadDockZone2" runat="server" height="300px" width="300px"> 
                <telerik:raddock id="Raddock1" runat="server" text="Dock 1" title="Dock 1"> 
                </telerik:raddock> 
            </telerik:raddockzone> 
        </telerik:raddocklayout> 
        </div> 

In case your problem still persists I kindly ask you to isolate the issue in a small running page and send it to us so we can reproduce it here and investigate it. We would prefer if possible a page as simple as possible with just the code needed to reproduce the issue and not a huge project with many irrelevant to the problem methods.

2. You are correct about the way you can get reference to RadDockLayout on the master page. However RadDockLayout does not expose methods LoadLayout and SaveLayout. It exposes the events LoadDockLayout and SaveDockLayout which you can handle to perform logic of loading/saving the state. It also provides the RegisteredDocks and GetRegisteredDocksState methods to get the registered docks and their states correspondingly.

3. For the CSS issue - please try using !important as demonstrated in one other ticket we sent you. If you continue to experience problems, please give us a simple example of one thing you need to modify and how you want it to look like and which approach you prefer - using the CssClass property; setting style; modifying a skin - and we will provide an example of how to achieve it.

Please, note that to be able to attach files you need to open a support ticket.

Greetings,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 15 Oct 2007, 03:32 PM

I have created a Master/Content Page test site and have reproduced the problem. I have also added the !important tags to my cooresponding css classes, which did fix the highlight and styling issue I was having.

I have now read the documentation about LoadLayout and SaveLayout and it was an error on my part to assume that they were methods not events. That being the case I have also reproduced your saving and loading layout example from a cookie in my test site, which I will open a ticket for. I can see that the loadlayout event does fire, but I can not figure out how to fire the savelayout event on the masterpage. If you could also give some direction here I would appreciate it.

Thank you as always,
Garry Clark