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

[Solved] RadDock control doesn't work togather with RadPanelBar

3 Answers 125 Views

Dock

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

jerry asked on 20 Jun 2007, 10:09 AM

Hi,
I am trying to put RadDockLayout inside RadPanelBar.I got very strange behavior. I am wondering whether RadDock control is compatible with RadPanelBar.I am using lastest version of both Rad Prometheums and RadPanelBar.
My code is as following:
Webform1.aspx

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="WebForm1.aspx.cs" Inherits="AJAXEnabledWebApplication1.WebForm1" %> 

<%@ Register Assembly="RadPanelbar.Net2" Namespace="Telerik.WebControls" TagPrefix="radP" %> 

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

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

    <title>Untitled Page</title> 

</head> 

<body> 

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

        <div> 

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

            </asp:ScriptManager> 

            <asp:Label ID="lblError" runat="server" ForeColor="red" /> 

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

            </telerik:RadDockLayout> 

            <telerik:RadDockLayout ID="rdl2" runat="Server" /> 

            <radP:RadPanelbar ID="rpb" runat="server">  

            </radP:RadPanelbar> 

        </div> 

    </form> 

</body> 

</html>

WebForm1.aspx.cs

using System;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

using Telerik.Web.UI;  

using Orientation=Telerik.Web.UI.Orientation;  

using Telerik.WebControls;  

namespace AJAXEnabledWebApplication1  

{  

    public partial class WebForm1 : Page  

    {  

        protected void Page_Init(object sender, EventArgs e)  

        {  

            RadDockZone z1 = new RadDockZone();  

            z1.ID = "zone1";  

            z1.Width = Unit.Pixel(150);  

            z1.BorderStyle = BorderStyle.Solid;  

            z1.Orientation = Orientation.Horizontal;  

            z1.FitDocks = true;  

            RadDock dock1 = new RadDock();  

            dock1.DockHandle = DockHandle.Grip;  

            dock1.ID = "RadDock1";  

            dock1.Text = "Dock1";  

            dock1.Width = Unit.Pixel(150);  

            z1.Controls.Add(dock1);  

            RadDockZone z2 = new RadDockZone();  

            z2.ID = "zone2";  

            z2.Width = Unit.Pixel(150);  

            z2.BorderStyle = BorderStyle.Solid;  

            z2.Orientation = Orientation.Horizontal;  

            z1.FitDocks = true;  

            RadDock dock2 = new RadDock();  

            dock2.DockHandle = DockHandle.Grip;  

            dock2.ID = "RadDock2";  

            dock2.Text = "Dock2";  

            dock2.Width = Unit.Pixel(150);  

            z2.Controls.Add(dock2);  

            rdl1.Controls.Add(z1);  

            rdl2.Controls.Add(z2);  

            RadPanelItem header1=new RadPanelItem("Bar1");  

            RadPanelItem content1=new RadPanelItem();  

            header1.Expanded = true;  

            content1.Controls.Add(rdl1);  

            header1.Items.Add(content1);  

            rpb.Items.Add(header1);  

            RadPanelItem header2=new RadPanelItem("Bar2");  

            header2.Expanded = true;  

            RadPanelItem content2=new RadPanelItem();  

            content2.Controls.Add(rdl2);  

            header2.Items.Add(content2);  

            rpb.Items.Add(header2);  

        }  

        protected void Page_Load(object sender, EventArgs e)  

        {  

        }  

    }  

}

3 Answers, 1 is accepted

answered on 20 Jun 2007, 02:04 PM

Hi Jerry,

Unfortunately this is a bug which appears only in IE. It is connected to the notorious "hasLayout" property, which influences elements' rendering. You can workaround it by adding :

<style type="text/css">  

.slide{zoom:1}   

</style>

This will trigger the hasLayout property and fix the dock's positioning.
Your code must look like this:

<%@ Register Assembly="RadPanelbar.Net2" Namespace="Telerik.WebControls" TagPrefix="radP" %>    

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

<!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 id="Head1" runat="server">     

    <title>Untitled Page</title>    

   <style type="text/css">  

    .slide{zoom:1}      

    </style> 

</head>    

<body>    

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

        <div>    

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

            </asp:ScriptManager>    

            <asp:Label ID="lblError" runat="server" ForeColor="red" />    

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

            </telerik:RadDockLayout>    

            <telerik:RadDockLayout ID="rdl2" runat="Server" />    

            <radP:RadPanelbar ID="rpb" runat="server">     

            </radP:RadPanelbar>    

        </div>    

    </form>    

</body>    

</html>

I strongly recommend the use of only one RadDockLayout control. For example your code will look like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="pages_DockOld_Tickets_Panelbar_Default" %> 

<%@ Register Assembly="RadPanelbar.Net2" Namespace="Telerik.WebControls" TagPrefix="radP" %>    

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

<!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 id="Head1" runat="server">     

    <title>Untitled Page</title>    

   <style type="text/css">  

    .slide{zoom:1}      

    </style> 

</head>    

<body>    

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

        <div>    

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

            </asp:ScriptManager>    

            <asp:Label ID="lblError" runat="server" ForeColor="red" />    

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

            <radP:RadPanelbar ID="rpb" runat="server">     

            </radP:RadPanelbar>    

               </telerik:RadDockLayout>    

        </div>    

    </form>    

</body>    

</html>

Codebehind:

using System;  

using System.Data;  

using System.Configuration;  

using System.Collections;  

using System.Web;  

using System.Web.Security;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

using System.Web.UI.WebControls.WebParts;  

using System.Web.UI.HtmlControls;  

using Telerik.Web.UI;  

using Telerik.WebControls;  

public partial class pages_DockOld_Tickets_Panelbar_Default : System.Web.UI.Page  

{  

    protected void Page_Init(object sender, EventArgs e)  

    {  

        RadDockZone z1 = new RadDockZone();  

        z1.ID = "zone1";  

        z1.Width = Unit.Pixel(150);  

        z1.BorderStyle = BorderStyle.Solid;  

        z1.Orientation = Telerik.Web.UI.Orientation.Horizontal;  

        z1.FitDocks = true;  

        RadDock dock1 = new RadDock();  

        dock1.DockHandle = DockHandle.Grip;  

        dock1.ID = "RadDock1";  

        dock1.Text = "Dock1";  

        dock1.Width = Unit.Pixel(150);  

        z1.Controls.Add(dock1);  

        RadDockZone z2 = new RadDockZone();  

        z2.ID = "zone2";  

        z2.Width = Unit.Pixel(150);  

        z2.BorderStyle = BorderStyle.Solid;  

        z2.Orientation = Telerik.Web.UI.Orientation.Horizontal;  

        z1.FitDocks = true;  

        RadDock dock2 = new RadDock();  

        dock2.DockHandle = DockHandle.Grip;  

        dock2.ID = "RadDock2";  

        dock2.Text = "Dock2";  

        dock2.Width = Unit.Pixel(150);  

        z2.Controls.Add(dock2);  

        RadPanelItem header1 = new RadPanelItem("Bar1");  

        RadPanelItem content1 = new RadPanelItem();  

        header1.Expanded = true;  

        content1.Controls.Add(z1);  

        header1.Items.Add(content1);  

        rpb.Items.Add(header1);  

        RadPanelItem header2 = new RadPanelItem("Bar2");  

        header2.Expanded = true;  

        RadPanelItem content2 = new RadPanelItem();  

        content2.Controls.Add(z2);  

        header2.Items.Add(content2);  

        rpb.Items.Add(header2);     

    }  

    protected void Page_Load(object sender, EventArgs e)  

    {  

    }     

}

I hope this will help you.

Best Regards,
Petio Petkov
the Telerik team

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

answered on 20 Jun 2007, 10:47 PM

Thanks for your help. it's working now.
However, I found another problem with it.
I always got "0" from rdl.RegisteredDocks.Count when i added RadDockZones into RadPanelBar,although i have added docks into
RadDocksLayout.
My code as following:
Default2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 

<%@ Register TagPrefix="radp" Namespace="Telerik.WebControls" Assembly="RadPanelbar.NET2" %> 

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

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

    <title>Untitled Page</title> 

    <style type="text/css">     

        .slide{zoom:1}      

    </style>   

</head> 

<body> 

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

        <div style=" float:left;">  

            <asp:Label ID="lblError" runat="server" ForeColor="red" /> 

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

            </asp:ScriptManager> 

            <telerik:RadDockLayout ID="rdl" runat="server" /> 

            <radp:RadPanelbar runat="server" ID="rpb" Width="170px" PersistStateInCookie="true" 

                ExpandMode="MultipleExpandedItems" /> 

        </div> 

        <div style=" width:500px; height:1500px; background-color:Lime;"></div> 

    </form> 

</body> 

</html>

Default2.aspx.cs

using System;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

using Telerik.Web.UI;  

using Orientation=Telerik.Web.UI.Orientation;  

using Telerik.WebControls;  

public partial class Default2 : Page  

{  

    protected void Page_Init(object sender, EventArgs e)  

    {  

        RadDockZone z1 = new RadDockZone();  

        z1.ID ="zone1";  

        z1.Width = Unit.Pixel(150);  

        z1.BorderStyle = BorderStyle.Solid;  

        z1.Orientation = Orientation.Horizontal;  

        RadDock rdo1 = new RadDock();  

        rdo1.ID = "Dock1";  

        rdo1.DockHandle = DockHandle.Grip;  

        rdo1.Collapsed = false;  

        rdo1.Title = "Dock1";  

        Label lbl1 = new Label();  

        lbl1.ID = "lblField1";  

        lbl1.Width = Unit.Percentage(100);  

        lbl1.Text = "Dock1";  

        rdo1.ContentContainer.Controls.Add(lbl1);  

        z1.Controls.Add(rdo1);  

        rdo1.Height = Unit.Pixel(20);  

        rdo1.Width = Unit.Pixel(150);  

        RadDockZone z2 = new RadDockZone();  

        z2.ID = "zone2";  

        z2.Width = Unit.Pixel(150);  

        z2.BorderStyle = BorderStyle.Solid;  

        z2.Orientation = Orientation.Horizontal;  

        RadDock rdo2 = new RadDock();  

        rdo2.ID ="Dock2";  

        rdo2.DockHandle = DockHandle.Grip;  

        rdo2.Collapsed = false;  

        rdo2.Title ="Dock2";  

        Label lbl2 = new Label();  

        lbl2.ID = "lblField2";  

        lbl2.Width = Unit.Percentage(100);  

        lbl2.Text = "Dock2";  

        rdo2.ContentContainer.Controls.Add(lbl2);  

        z2.Controls.Add(rdo2);  

        rdo2.Height = Unit.Pixel(20);  

        rdo2.Width = Unit.Pixel(150);  

        rdo2.ForbiddenZones = new string[]{z1.ID};  

        rdl.Controls.Add(z1);  

        rdl.Controls.Add(z2);  

//please comment and uncomment the following block to see the problem.  

/*      RadPanelItem header1 = new RadPanelItem("Zone1");  

        rpb.Items.Add(header1);  

        header1.Expanded = true;  

        RadPanelItem contents1 = new RadPanelItem();  

        header1.Items.Add(contents1);  

        contents1.Controls.Add(z1);  

        RadPanelItem header2 = new RadPanelItem("Zone2");  

        rpb.Items.Add(header2);  

        header2.Expanded = true;  

        RadPanelItem contents2 = new RadPanelItem();  

        header2.Items.Add(contents2);  

        contents2.Controls.Add(z2);*/  

    }  

    protected void Page_Load(object sender, EventArgs e)  

    {  

        lblError.Text = rdl.RegisteredDocks.Count.ToString();  

    }  

}