Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Dynamically created RadDockZones

2 Answers 85 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Teija
Top achievements
Rank 1
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

Sort by
0
Jim
Top achievements
Rank 1
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) 
    { 
 
    } 
} 
 


0
Teija
Top achievements
Rank 1
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
Tags
Dock
Asked by
Teija
Top achievements
Rank 1
Answers by
Jim
Top achievements
Rank 1
Teija
Top achievements
Rank 1
Share this question
or