Dynamically created RadDockZones

3 posts, 0 answers
  1. Teija
    Teija avatar
    23 posts
    Member since:
    Oct 2008

    Posted 29 Sep 2009 Link to this post

    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. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 30 Sep 2009 Link to this post

    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) 
        { 
     
        } 
     


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Teija
    Teija avatar
    23 posts
    Member since:
    Oct 2008

    Posted 30 Sep 2009 Link to this post

    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
Back to Top