how to identify positions of raddocks within a zone

9 posts, 2 answers
  1. Tanuj
    Tanuj avatar
    76 posts
    Member since:
    Aug 2012

    Posted 30 Apr 2008 Link to this post

    hi,

    i am dynamically creating dock's in a single zone, the docks are dragable within the zone for repositioning, however after the respositioning is complete i want to find out the new positions in the zone.

    the user would be presented with this screen and their sequence is captured.

    please advise how can this be achieved..?

    here is a working example of what i am trying to achieve
    http://64.37.197.51/app.21online/MyListings/media_sequence.aspx?tr_key=32153146

    and here is the source code
    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 C21Online.Solution.DAL.App;  
    using Telerik.Web.UI;    
    public partial class MyListings_media_sequence : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (Request["tr_key"] != "")  
            {  
                BuildThePage(Convert.ToInt32(Request["tr_key"].ToString()));  
            }  
        }  
     
        private void BuildThePage(int tr_key)  
        {  
            DataSet PhotosDS = new DataSet();  
            PhotosDS = Listings.GetPhotosByListing(tr_key);  
            if (PhotosDS != null)  
            {  
                Image img;  
                for (int i = 0; i < PhotosDS.Tables[0].Rows.Count; i++)  
                {  
                    imgnew Image();  
                    img.CssClass = "thumbnail";   
                    img.ID = "thumbnail_" + i.ToString();  
                    img.ImageUrl = PhotosDS.Tables[0].Rows[i]["URL"].ToString().Trim();  
                    img.Width = Unit.Pixel(100);  
                    img.Height = Unit.Pixel(80);  
                    img.ToolTip = PhotosDS.Tables[0].Rows[i]["Title"].ToString().Trim();   
                      
                    RadDock rd = new RadDock();  
                    rd.ID = "DockPhoto_" + i.ToString();  
                    rd.DockMode = DockMode.Docked;  
                    rd.Title = (i+1).ToString();  
                    rd.DockHandle = DockHandle.TitleBar;     
                    rd.ContentContainer.Controls.Add(img);  
                    rd.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None;        
                    rd.Width = Unit.Pixel(120);  
                    rd.Height = Unit.Pixel(120);  
                    RadDockZoneHorizontal1.Controls.Add(rd);  
                }  
            }  
        }  
    }  
     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="media_sequence.aspx.cs" Inherits="MyListings_media_sequence" %> 
     
    <%@ 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>Photo Sequence</title> 
        <LINK href="~/css/sitestyles.css" type="text/css" rel="stylesheet">  
        <script language="javascript" type="text/javascript" src="~/JS/main.js"></script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" > 
        </asp:ScriptManager>      
        <div> 
            <table cellpadding="0" cellspacing="0" border="0">  
                <tr> 
                    <td><img src="~/Images/Misc/spacer.gif" border="0" alt="" width="5" /></td>  
                    <td style="vertical-align:top;">  
                    <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Default" > 
                        <telerik:RadDockZone runat="server" id="RadDockZoneHorizontal1" orientation="Horizontal" 
                            BackColor="#8d8d8d" height="250px" width="650px">  
                        </telerik:RadDockZone> 
                    </telerik:RadDockLayout> 
                            <asp:PlaceHolder runat="server" id="phPhotos"></asp:PlaceHolder> 
                    </td> 
                    <td><img src="~/Images/Misc/spacer.gif" border="0" alt="" width="5" /></td>  
                </tr> 
            </table>      
        </div> 
        </form> 
    </body> 
    </html> 
     

  2. Tanuj
    Tanuj avatar
    76 posts
    Member since:
    Aug 2012

    Posted 01 May 2008 Link to this post

    any updates..?

    also,
    how do we make the dynamically added dock's content(a image in my case) as the DockHandle

    i would like to know how to add the OnClientInitialize="SetHandleDock" to dynamically created docks.
                Image img;     
                for (int i = 0; i < PhotosDS.Tables[0].Rows.Count; i++)     
                {     
                    imgnew Image();     
                    img.CssClass = "thumbnail";      
                    img.ID = "thumbnail_" + i.ToString();     
                    img.ImageUrl = PhotosDS.Tables[0].Rows[i]["URL"].ToString().Trim();     
                    img.Width = Unit.Pixel(100);     
                    img.Height = Unit.Pixel(80);     
                    img.ToolTip = PhotosDS.Tables[0].Rows[i]["Title"].ToString().Trim();      
                         
                    RadDock rd = new RadDock();     
                    rd.ID = "DockPhoto_" + i.ToString();     
                    rd.DockMode = DockMode.Docked;     
                    rd.Title = (i+1).ToString();     
                    rd.DockHandle = DockHandle.TitleBar;        
                    rd.ContentContainer.Controls.Add(img);     
                    rd.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None;           
                    rd.Width = Unit.Pixel(120);     
                    rd.Height = Unit.Pixel(120);     
                    RadDockZoneHorizontal1.Controls.Add(rd);     
                }    
     


    and how do we replace the "DragImage" in the example below with the dynamically added image inside the docks content area.


    <script type="text/javascript">
     
    function SetHandleDock(dock, args)
     {
       dock.set_handle(document.getElementById("DragImage"));
     }
    </script>
  3. Tanuj
    Tanuj avatar
    76 posts
    Member since:
    Aug 2012

    Posted 05 May 2008 Link to this post

    Telerik Team,

    any updates on this..?

  4. Dimcho
    Admin
    Dimcho avatar
    45 posts

    Posted 07 May 2008 Link to this post

    Hi Tanuj,

    I suggest you review our online demo Dynamically Created Docks and the help article Dynamically Creating RadDock Controls which describes how you can dynamically create docks and save their states in a storage medium such as a cookie or database. The RadDockLayout's server-side events SaveDockLayout and LoadDockLayout allow you to easily achieve this functionality. These events receive as an argument a DockLayoutEventArgs object which has two properties - DockZoneID and Index.The Index property is the position of the RadDock control in the docking zone.
    If you want to add a content inside a dynamically created dock you should do this in the function which creates the dock. Please look at the following example:

    private RadDock CreateRadDock()  
    {  
       RadDock dock = new RadDock();  
        ...  
       System.Web.UI.WebControls.Image picture = new System.Web.UI.WebControls.Image();  
       picture.ImageUrl = "~/Images/images.jpg";  
         
       dock.ContentContainer.Controls.Add(picture);  
       ...  


    Greetings,
    Dimcho
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Tanuj
    Tanuj avatar
    76 posts
    Member since:
    Aug 2012

    Posted 07 May 2008 Link to this post

    telerik team, thanks for the response.

    i got the answer for the first question, however the second question was how to make the content of the raddock as the drag handle.

    the explanation that you gave is how to add content to dynamically added raddocks.

    please advise.
  6. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 10 May 2008 Link to this post

    Hi Tanuj,

    DockHandle can be set server-side only to None, Grip or TitleBar. 
    However, you can set client-side an element within the content of the RadDock to be recognized as the drag element. To achieve this you should handle the OnClientInitialize event and set the DockHandle with RadDock object's client-side method set_handle. Please, take a look at the Set Drag Handle Client-side online example which demonstrates how to achieve this functionality.

    For your convenience I have attached a sample page based on the code you had previously sent us which also demonstrates the described above.

    Best regards,
    Sophy
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Tanuj
    Tanuj avatar
    76 posts
    Member since:
    Aug 2012

    Posted 14 May 2008 Link to this post

    sophy,
    thanks you for the example, i was able to move ahead, i was able to make the content's of the dynamically created docks as the draghandle.

    please review the following link

    http://64.37.197.51/app.21online/MyListings/media_sequence.aspx?tr_key=32153146

    i have only one zone and multiple docks within them, i want the user to change the sequence of the dynamically created docks by dragging into various positions

    here is what i want to achieve
    (1) i want to save the positions of the docks upon a button click event not the savedocklayout. there is a save changes button on the page.
    (2) i want to build two arrays of ids, one with the original positions and the other with the newly moved positions.

    i tried your suggestions to use DockLayoutEventArgs object which has two properties - DockZoneID and Index.The Index property is the position of the RadDock control in the docking zone. but i am always getting the same positions for both, may be i am doing something wrong.

    do you have any sample code to achieve this

    thanks in advance
  8. Answer
    Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 16 May 2008 Link to this post

    Hello Tanuj,

    You can find below my suggestions for achieving the desired scenario:

    1. If you want to save  the positions of the docks upon a button click event not at savedocklayout you simply need to store the info about the added docks in session/cookie/database when the button is clicked. You can take a look at the Load/Save Layout and Dynamically Created Docks online examples for reference and move the code form the savedocklayout event handler to your button's event handler.
    2. If you want to have two arrays - one with docks' current positions and another with their old positions you should update the value of the array with the old positions before having updated the stored state and the array with the new positions after you update and store the current docks state.

    I have prepared an example demonstrating a scenario similar to the one you describe. There are some comments which can help you better understand the provided implementation. Please, review the attached example and let me know if you need further assistance.

    All the best,

    Sophy
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
  9. Answer
    Tanuj
    Tanuj avatar
    76 posts
    Member since:
    Aug 2012

    Posted 16 May 2008 Link to this post

    thanks sophy,

    the code worked great!!

Back to Top