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

[Solved] Dynamically created RadDockZones

2 Answers 156 Views

Dock

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

Teija asked on 29 Sep 2009, 10:08 PM

I have a situation where I need to create both dynamic layout and dynamic positioning with RadDockZones.
All the example I have seen are using RadDockZones created in design-time. I have managed to create RadDockZones in run-time but have problem to positioning them correctly. I want to be able to arrange them like the cells in the below example. But how can I do that with dynamically created RadDockZones which are handled the same as normally divs I guess.

    
                    <table border='1' width='100%'>  
        
                        <tr>  
        
                            <td width='50%'>  
        
                                left  
        
                            </td>  
        
                            <td width='50%'>  
        
                                <table border='1' width='100%'>  
        
                                    <tr>  
        
                                        <td width='100%'> 
        
                                            right top 
        
                                        </td>  
        
                                    </tr>  
        
                                    <tr>   
        
                                        <td width='100%'> 
        
                                            right bottom 
        
                                        </td>  
        
                                    </tr>  
        
                                </table>  
        
                            </td>  
        
                        </tr>  
        
                    </table>

I can manage it if I create the layout in design-time if I put a RadDockZone in each cell.

Hope anyone can help.

2 Answers, 1 is accepted

answered on 30 Sep 2009, 09:38 AM

You can append the element with a JavaScript loaded from the server. Take a look at my code:

.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ 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></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager" runat="server"> 
        
                </asp:ScriptManager> 
        
                <br /> 
        
                Choose location for the zone: 
        
                <asp:DropDownList ID="ddlZones" runat="server"> 
        
                    <asp:ListItem Text="TD LEFT" Value="tdLeft"></asp:ListItem> 
        
                    <asp:ListItem Text="TD RIGHT TOP" Value="tdRightTop"></asp:ListItem> 
        
                    <asp:ListItem Text="TD RIGHT BOTTOM" Value="tdRightBottom"></asp:ListItem> 
        
                </asp:DropDownList> 
        
                ADD ZONES 
        
                <asp:Button runat="server" ID="ButtonAddZone" Text="Add ZONE (AJAX)" OnClick="ButtonAddZone_Click" /> 
        
                <br /> 
        
                <br /> 
        
                <div id="divMain"> 
        
                    <asp:UpdatePanel runat="server" ID="UpdatePanel1"> 
        
                        <ContentTemplate> 
        
                            <br /> 
        
                            <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout" 
        
                                OnLoadDockLayout="RadDockLayout1_LoadDockLayout"> 
        
                                <table border='1' width='100%'> 
        
                                    <tr> 
        
                                        <td id="tdLeft" width='50%'> 
        
                                            left 
        
                                        </td> 
        
                                        <td width='50%'> 
        
                                            <table border='1' width='100%'> 
        
                                                <tr> 
        
                                                    <td id="tdRightTop" width='100%'> 
        
                                                        right top 
        
                                                    </td> 
        
                                                </tr> 
        
                                                <tr> 
        
                                                    <td id="tdRightBottom" width='100%'> 
        
                                                        right bottom 
        
                                                    </td> 
        
                                                </tr> 
        
                                            </table> 
        
                                        </td> 
        
                                    </tr> 
        
                                </table> 
        
                            </telerik:RadDockLayout> 
        
                        </ContentTemplate> 
        
                        <Triggers> 
        
                            <asp:AsyncPostBackTrigger ControlID="ButtonAddZone" EventName="Click" /> 
        
                        </Triggers> 
        
                    </asp:UpdatePanel> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

.cs

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            using System.Text; 
        
            public partial class _Default : System.Web.UI.Page 
        
            { 
        
                private string CurrentDockZones 
        
                { 
        
                    get 
        
                    { 
        
                        //Get saved state string from the session - set it to _zoneStates variable for example  
        
                        string _zoneStates = ""; 
        
                        if (Session["CurrentDockZones"] != null) 
        
                        { 
        
                            _zoneStates = (string)Session["CurrentDockZones"]; 
        
                        } 
        
                        return _zoneStates; 
        
                    } 
        
                    set 
        
                    { 
        
                        Session["CurrentDockZones"] = value; 
        
                    } 
        
                } 
        
                protected override void OnInit(EventArgs e) 
        
                { 
        
                    base.OnInit(e); 
        
                    string zoneStates = CurrentDockZones; 
        
                    //Start building the script to reappend the zones to the respective elements 
        
                    string script = "function _reAppendZone() {{ Sys.Application.remove_load(_reAppendZone); "; 
        
                    string[] zoneStateArray = zoneStates.Split('|'); 
        
                    foreach (string uniqueName in zoneStateArray) 
        
                    { 
        
                        if (uniqueName.Trim() != string.Empty) 
        
                        { 
        
                            RadDockZone zone = CreateZoneFromState(uniqueName); 
        
                            RadDockLayout1.Controls.Add(zone); 
        
                            string elementID = zone.UniqueName; 
        
                            script = script + string.Format(" $get('{1}').appendChild($find('{0}').get_element()); ", zone.ClientID, elementID); 
        
                        } 
        
                    } 
        
                    script = script + "}}; Sys.Application.add_load(_reAppendZone);"; 
        
                    ScriptManager.RegisterStartupScript(this, 
        
                        this.GetType(), 
        
                        "ReAppendZone", script, true); 
        
                } 
        
                private RadDockZone CreateZoneFromState(string uniqueName) 
        
                { 
        
                    RadDockZone zone = new RadDockZone(); 
        
                    zone.UniqueName = uniqueName; 
        
                    zone.ID = String.Format("RadDockZone_{0}", zone.UniqueName); 
        
                    zone.MinHeight = Unit.Pixel(200); 
        
                    zone.Width = Unit.Pixel(300); 
        
                    return zone; 
        
                } 
        
                private RadDockZone CreateZone() 
        
                { 
        
                    RadDockZone zone = new RadDockZone(); 
        
                    zone.UniqueName = ddlZones.SelectedValue; 
        
                    zone.ID = String.Format("RadDockZone_{0}", zone.UniqueName); 
        
                    zone.MinHeight = Unit.Pixel(200); 
        
                    zone.Width = Unit.Pixel(300); 
        
                    return zone; 
        
                } 
        
                protected void ButtonAddZone_Click(object sender, EventArgs e) 
        
                { 
        
                    RadDockZone zone = CreateZone(); 
        
                    RadDockLayout1.Controls.Add(zone); 
        
                    //The following script appends the zone to the respective <td> element.  
        
                    //It uses $get to find the <td> by id (in my case the id is the zone's UniqueName) 
        
                    string elementID = zone.UniqueName; 
        
                    ScriptManager.RegisterStartupScript(this, 
        
                        this.GetType(), 
        
                        "AppendZone", 
        
                    string.Format(@"function _appendZone() {{
        
                                Sys.Application.remove_load(_appendZone);
        
                                $get('{1}').appendChild($find('{0}').get_element());
        
                                }};
        
                                Sys.Application.add_load(_appendZone);", zone.ClientID, elementID), 
        
                    true); 
        
                } 
        
                protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e) 
        
                { 
        
                    List<RadDockZone> registeredZones = RadDockLayout1.RegisteredZones.ToList<RadDockZone>(); 
        
                    StringBuilder serializedZoneList = new StringBuilder(); 
        
                    for (int i = 0; i < registeredZones.Count; i++) 
        
                    { 
        
                        serializedZoneList.Append(registeredZones[i].UniqueName); 
        
                        serializedZoneList.Append("|"); 
        
                    } 
        
                    string zoneState = serializedZoneList.ToString(); 
        
                    CurrentDockZones = zoneState; 
        
                } 
        
                protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e) 
        
                { 
        
                } 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                } 
        
            }

answered on 30 Sep 2009, 10:01 AM

Many thanks. It looks like it works fine. Fantastic.
You might seem confused why Im using a traditional table but I have found a way to use divs with the same behavior.
If I want them arranged like the cells in my example and be fully resized acording to container they are placed in.
I can get divs with that arrangement but only with fixed positions.
If I could solve it with divs the RadDockZones should work the same I guess.

When Im using a table like this I can load a table layout in init-time and then place the zones by finding them like you showed in the example. Works fine.
/Mathias