RadDock control doesn't work togather with RadPanelBar

4 posts, 0 answers
  1. jerry
    jerry avatar
    5 posts
    Member since:
    Jun 2007

    Posted 20 Jun 2007 Link to this post

    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)  
            {  
            }  
        }  
    }  
     
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 20 Jun 2007 Link to this post


    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
  3. jerry
    jerry avatar
    5 posts
    Member since:
    Jun 2007

    Posted 20 Jun 2007 Link to this post

    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();  
             
        }  
    }  
     

  4. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 21 Jun 2007 Link to this post

    Hello jerry,

    As Petio's example, you should enclose RadPanelBar with RadDockLayout to make it work:

    <telerik:raddocklayout>
        <radp:radpanelbar>
        </radp:radpanelbar>
    </telerik:raddocklayout>

    All the best,
    Valeri Hristov (Senior Developer, MCSD)
    the Telerik team

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