Multiple Dynamic Docks creation

10 posts, 0 answers
  1. madhu
    madhu avatar
    29 posts
    Member since:
    Mar 2007

    Posted 30 May 2007 Link to this post

    In the dynamic dock creation code, when button is clicked for new dock creation this is the code available.
      protected void Button1_Click(object sender, EventArgs e)
        {
            RadDock dock = CreateRadDock();
                //In order to optimize the execution speed we are adding the dock to a
                // hidden update panel and then register a script which will move it
                // to RadDockZone1 after the AJAX request completes. If you want to
                // dock the control in other zone, modify the script according your needs.
                UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);
                ScriptManager.RegisterStartupScript(
                    UpdatePanel1,
                    typeof(RadDock),
                    "DockIntoZone",
                    string.Format(@"
    Sys.Application.add_load(function() {{
        if (typeof(Telerik.Dock{0}Moved) === 'undefined')
        {{
            $find('{1}').dock($find('{0}'));
            Telerik.Dock{0}Moved = true;
        }}
    }});", dock.ClientID, RadDockZone2.ClientID),
                    true);

                //Right now the RadDock control is not docked. When we try to save its state
                // later, the DockZoneID will be empty. To workaround this problem we will
                // set the AutoPostBack property of the RadDock control to true and will
                // attach an AsyncPostBackTrigger for the DockPositionChanged client-side
                // event. This will initiate second AJAX request in order to save the state
                // AFTER the dock was docked in RadDockZone1.
                CreateSaveStateTrigger(dock);
            }

    In the Button1 click i am trying to create 3 RadDocks at a time But only one RadDock is displayed on the screen and the rest of them are created but does not show up. When postback occurs they show but at the header of the page but not in the RAdDockzones.
    and the RadDock width appears 100% of the window.

       protected void Button1_Click(object sender, EventArgs e)
        {
          
            //First Dock
            RadDock dock = CreateRadDock("DOC1");
            dock.ID = "Doc1";
           UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);
            ScriptManager.RegisterStartupScript(
                UpdatePanel1,
                typeof(RadDock),
                "DockIntoZone",
                string.Format(@"
    Sys.Application.add_load(function() {{
        if (typeof(Telerik.Dock{0}Moved) === 'undefined')
        {{
            $find('{1}').dock($find('{0}'));
            Telerik.Dock{0}Moved = true;
        }}
    }});", dock.ClientID, RadDockZone1.ClientID),
                true);

            CreateSaveStateTrigger(dock);

            //Second Dock
            RadDock dock2 = CreateRadDock("DOC2");
            dock2.ID = "Doc2";
            UpdatePanel1.ContentTemplateContainer.Controls.Add(dock2);
            ScriptManager.RegisterStartupScript(
                UpdatePanel1,
                typeof(RadDock),
                "DockIntoZone",
                string.Format(@"
    Sys.Application.add_load(function() {{
        if (typeof(Telerik.Dock{0}Moved) === 'undefined')
        {{
            $find('{1}').dock($find('{0}'));
            Telerik.Dock{0}Moved = true;
        }}
    }});", dock2.ClientID, RadDockZone2.ClientID),
                true);

            CreateSaveStateTrigger(dock2);


            //Third Dock
            RadDock dock3 = CreateRadDock("DOC3");
            dock3.ID = "Doc3";
            UpdatePanel1.ContentTemplateContainer.Controls.Add(dock3);
            ScriptManager.RegisterStartupScript(
                UpdatePanel1,
                typeof(RadDock),
                "DockIntoZone",
                string.Format(@"
    Sys.Application.add_load(function() {{
        if (typeof(Telerik.Dock{0}Moved) === 'undefined')
        {{
            $find('{1}').dock($find('{0}'));
            Telerik.Dock{0}Moved = true;
        }}
    }});", dock3.ClientID, RadDockZone3.ClientID),
                true);

            CreateSaveStateTrigger(dock3);
        }
    The code with the UpdatePanel1 does it create 3 RadDocks and displaysonly one, Does the code different for multiple RadDocks at a time.
    Can you help me with this.




  2. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 04 Jun 2007 Link to this post

    Hello madhu,

    You should use different keys for each script you register with the ScriptManager, e.g. the highlighted parameter of the RegisterStartupScript method should be always different:
    ...
    ScriptManager.RegisterStartupScript(
          UpdatePanel1,
          typeof(RadDock),
         "DockIntoZone",
          string.Format(@"
    ...

    If you use equal keys the ScriptManager will assume that the scripts are the same and will send only one of them on the client.

    Regards,
    Valeri Hristov (Senior Developer, MCSD)
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. madhu
    madhu avatar
    29 posts
    Member since:
    Mar 2007

    Posted 04 Jun 2007 Link to this post

    Thank you for reply

    ScriptManager.RegisterStartupScript(
          UpdatePanel1,
          typeof(RadDock),
         "DockIntoZone",
          string.Format(@"
    ...

    If you use equal keys the ScriptManager will assume that the scripts are the same and will send only one of them on the client.

    But what should be used in place of DockIntoZone for each key.
    Like what?
    Can you explain me clearly.
    Thanks

  5. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 04 Jun 2007 Link to this post

    Hello madhu,

    http://ajax.asp.net/docs/mref/M_System_Web_UI_ScriptManager_RegisterStartupScript_5_d03cd23f.aspx

    The third parameter of the RegisterStartupScript() method is the key, which uniqueli identifies the script which you want to register. This key helps the ScriptManager to avoid multiple registrations of the same script. In your specific scenario you could use a string, which is unique for the script, being registered, for example the ClientID of the new RadDock control, something like:
    ScriptManager.RegisterStartupScript(
        UpdatePanel1,
        typeof(RadDock),
        "DockIntoZone" + dock.ClientID,
        string.Format(@"
        ...

    Kind regards,
    Valeri Hristov (Senior Developer, MCSD)
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Dodi
    Dodi avatar
    4 posts
    Member since:
    Oct 2008

    Posted 08 Oct 2008 Link to this post

     i am trying to create multiple RadDocks at a time But only one RadDock is displayed on the screen and the rest of them are created but does not show up. When postback occurs they show but at the header of the page but not in the RAdDockzones.
    and the RadDock width appears 100% of the window.



     

    protected void CreateDynamicDock()

     

    {

    RadDockZone1.Docks.Clear();

    RadDockZone2.Docks.Clear();

     

    STDocksMasterRoot sTDocksMasterRootObj = new STDocksMasterRoot();

     

     

    STDocksMasterCollection sTDocksMasterCollectionObj = sTDocksMasterRootObj.GetAllDocksName();

     

     

    string _zone;

     

     

     

    foreach (STDocksMaster dockName in sTDocksMasterCollectionObj)

     

    {

     

    RadDock dock = CreateRadDock();

     

     

    //In order to optimize the execution speed we are adding the dock to a

     

     

    // hidden update panel and then register a script which will move it

     

     

    // to RadDockZone1 after the AJAX request completes. If you want to

     

     

    // dock the control in other zone, modify the script according your needs.

     

    UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);

     

    if (ViewState["i"] == null)

     

    {

    ViewState[

    "i"] = 1;

     

    _zone =

    "RadDockZone1";

     

    }

     

    else

     

    {

    ViewState.Remove(

    "i");

     

    _zone =

    "RadDockZone2";

     

    }

     

     

    ScriptManager.RegisterStartupScript(

     

    UpdatePanel1,

     

    typeof(RadDock),

     

     

    "DockIntoZone" + dock.ClientID,

     

     

     

    string.Format(@"function _addDock() {{

     

    Sys.Application.remove_load(_addDock);

    $find('{1}').dock($find('{0}'));

    $find('{0}').doPostBack('DockPositionChanged');}};

    Sys.Application.add_load(_addDock);"

    , dock.ClientID, _zone),

     

     

    true);

     

     

    //Right now the RadDock control is not docked. When we try to save its state

     

     

    // later, the DockZoneID will be empty. To workaround this problem we will

     

     

    // set the AutoPostBack property of the RadDock control to true and will

     

     

    // attach an AsyncPostBackTrigger for the DockPositionChanged client-side

     

     

    // event. This will initiate second AJAX request in order to save the state

     

     

    // AFTER the dock was docked in RadDockZone1.

     

    CreateSaveStateTrigger(dock);

     

     

     

    //Load the selected widget in the RadDock control

     

     

    //DroptDownWidget.Visible = true;

     

    LoadWidget(dock);

    }

    }

  7. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 10 Oct 2008 Link to this post

    You should remove the code below from the loop:

    ScriptManager.RegisterStartupScript( 
    UpdatePanel1,
    typeof(RadDock), 
    "DockIntoZone" + dock.ClientID, 
    string.Format(@"function _addDock() {{ 
    Sys.Application.remove_load(_addDock);
    $find('{1}').dock($find('{0}'));
    $find('{0}').doPostBack('DockPositionChanged');}};
    Sys.Application.add_load(_addDock);"
    , dock.ClientID, _zone), true); 


    And use a code similar to the one below(once the loop is finished);

     

    ScriptManager.RegisterStartupScript( 
    UpdatePanel1,
    typeof(RadDock), 
    "DockIntoZone"
    string.Format(@"function _addDock() {{ 
    Sys.Application.remove_load(_addDock);
    $find('RadDock1'').dock($find('RadDockZone1'));
    $find('RadDock2'').dock($find('RadDockZone1'));
    .....
    $find('RadDockLatest').dock($find('RadDockZone1'));
    $find('RadDockLatest').doPostBack('DockPositionChanged');}};
    Sys.Application.add_load(_addDock);"
    , dock.ClientID, _zone), true); 

    Hope this helps!

  8. Priya
    Priya avatar
    144 posts
    Member since:
    Jul 2008

    Posted 06 Nov 2008 Link to this post

    Hello....
    I too have the same problem
    Save/Load state working for me for only one dynamic docks.But when i add mutiple docks inside a loop,only one dock is created..
    plz help me..
    the code is

     

     

    public partial class DefaultCS : System.Web.UI.Page

     

     

     

    {

     

    private SqlConnection _conn = new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"]);

     

     

    // myConnection2 = New SqlConnection(ConfigurationManager.AppSettings("ConnectionString"))

     

     

     

     

    private int _count = 0;

     

     

    int isthere = 0;

     

     

    private RadDock CreateRadDockFromState(string stringState)

     

    {

    System.Web.Script.Serialization.

    JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

     

     

    DockState state = serializer.Deserialize<DockState>(stringState);

     

     

    RadDock dock = new RadDock();

     

    dock.ID =

    string.Format("RadDock{0}", state.UniqueName);

     

    dock.ApplyState(state);

    dock.Command +=

    new DockCommandEventHandler(dock_Command);

     

    dock.Commands.Add(

    new DockCloseCommand());

     

    dock.Commands.Add(

    new DockExpandCollapseCommand());

     

     

    return dock;

     

    }

     

    private RadDock CreateRadDock()

     

    {

     

    RadDock dock = new RadDock();

     

    dock.UniqueName =

    Guid.NewGuid().ToString();

     

    dock.ID =

    string.Format("RadDock{0}", dock.UniqueName);

     

    dock.Title =

    "Dock";

     

    dock.Text =

    string.Format("Added at {0}", DateTime.Now);

     

    dock.Width =

    Unit.Pixel(300);

     

     

    dock.Commands.Add(

    new DockCloseCommand());

     

    dock.Commands.Add(

    new DockExpandCollapseCommand());

     

    dock.Command +=

    new DockCommandEventHandler(dock_Command);

     

     

    return dock;

     

    }

     

    void dock_Command(object sender, DockCommandEventArgs e)

     

    {

     

    if (e.Command.Name == "Close")

     

    {

     

    ScriptManager.RegisterStartupScript(

     

    UpdatePanel1,

     

    this.GetType(),

     

     

    "RemoveDock",

     

     

    string.Format(@"function _removeDock() {{ Sys.Application.remove_load(_removeDock);$find('{0}').undock(); $get('{1}').appendChild($get('{0}')); $find('{0}').doPostBack('DockPositionChanged');}};Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),

     

     

    true);

     

    }

    }

     

    private void CreateSaveStateTrigger(RadDock dock)

     

    {

     

    dock.AutoPostBack = true;

     

    dock.CommandsAutoPostBack =

    true;

     

     

    AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();

     

    saveStateTrigger.ControlID = dock.ID;

    saveStateTrigger.EventName =

    "DockPositionChanged";

     

    UpdatePanel1.Triggers.Add(saveStateTrigger);

    saveStateTrigger =

    new AsyncPostBackTrigger();

     

    saveStateTrigger.ControlID = dock.ID;

    saveStateTrigger.EventName =

    "Command";

     

    UpdatePanel1.Triggers.Add(saveStateTrigger);

    }

     

    protected void Page_Init(object sender, EventArgs e)

     

    {

     

    string dockState = "";

     

     

    try

     

     

     

    {

    _conn.Open();

     

    SqlCommand command = new SqlCommand("select State from dockState where id=1", _conn);

     

    dockState = command.ExecuteScalar().ToString();

     

    if (dockState!="")

     

    isthere=1;

    _conn.Close();

    }

     

    catch

     

     

     

    {

    }

     

    string[] currentDockStates = dockState.Split('|');

     

    _count = currentDockStates.Length;

     

    for (int i = 0; i < _count; i++)

     

    {

     

    if (currentDockStates[i].Trim() != string.Empty)

     

    {

     

    RadDock dock = CreateRadDockFromState(currentDockStates[i]);

     

     

    RadDockLayout1.Controls.Add(dock);

     

     

    CreateSaveStateTrigger(dock);

     

    }

    }

    }

     

     

     

    protected void RadDockLayout1_SaveDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)

     

    {

     

    string dockState;

     

     

    System.Web.Script.Serialization.

    JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

     

     

    List<DockState> stateList = RadDockLayout1.GetRegisteredDocksState();

     

     

     

    StringBuilder serializedList = new StringBuilder();

     

     

    int i = 0;

     

     

    while (i < stateList.Count)

     

    {

    serializedList.Append(serializer.Serialize(stateList[i]));

    serializedList.Append(

    "|");

     

    i++;

    }

    dockState = serializedList.ToString();

     

    if (dockState.Trim() != String.Empty)

     

    {

     

    try

     

     

     

    {

    _conn.Close();

    _conn.Open();

     

    SqlCommand command;

     

     

     

    int docktype=1;

     

    command =

    new SqlCommand("SaveDockState", _conn);

     

    command.CommandType=

    CommandType.StoredProcedure;

     

    command.Parameters.AddWithValue(

    "@State",dockState);

     

    command.Parameters.AddWithValue(

    "@Docktype",docktype);

     

     

    command.ExecuteNonQuery();

     

    _conn.Close();

    }

     

    catch

     

     

     

    {

    }

    }

     

    }

     

     

    protected void RadDockLayout1_LoadDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)

     

    {

    System.Web.Script.Serialization.

    JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

     

     

    string dockState = "";

     

     

    try

     

     

    {

     

    _conn.Open();

     

    SqlCommand command = new SqlCommand("select State from DockState where id=1", _conn);

     

    dockState = command.ExecuteScalar().ToString();

     

    if (dockState != "")

     

    isthere = 1;

    _conn.Close();

    }

     

    catch

     

     

     

    {

    }

     

    string[] currentDockStates = dockState.Split('|');

     

     

    foreach (string stringState in currentDockStates)

     

    {

     

    if (stringState.Trim() != string.Empty)

     

    {

     

    DockState state = serializer.Deserialize<DockState>(stringState);

     

    e.Positions[state.UniqueName] = state.DockZoneID;

    e.Indices[state.UniqueName] = state.Index;

    }

    }

    }

      

     

    protected void ButtonAddDock_Click(object sender, EventArgs e)

     

    {

     

    for (int i = 0; i < 4; i++)

     

    {

     

    RadDock dock = CreateRadDock();

     

     

    UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);

     

    ScriptManager.RegisterStartupScript(dock,this.GetType(),"AddDock",string.Format(@"function _addDock() {{Sys.Application.remove_load(_addDock);$find('{1}').dock($find('{0}'));$find('{0}').doPostBack('DockPositionChanged');}};Sys.Application.add_load(_addDock);",dock.ClientID, RadDockZone1.ClientID), true);

     

     

    CreateSaveStateTrigger(dock);

     

     

     

    }

    }

    }



    Plz help me.I became very much depressed due to it

  9. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 06 Nov 2008 Link to this post

     Please read my previous post. The problem you have is the same.
    If you add several RadDocks at once, You should invoke RadDock.doPostBack() method only for the latest RadDock.

    You should use a code similar to the one below:

     

    ScriptManager.RegisterStartupScript( 
    UpdatePanel1,
    typeof(RadDock), 
    "DockIntoZone"
    string.Format(@"function _addDock() {{ 
    Sys.Application.remove_load(_addDock);
    $find('RadDock1'').dock($find('RadDockZone1'));
    $find('RadDock2'').dock($find('RadDockZone1'));
    .....
    $find('RadDockLatest').dock($find('RadDockZone1'));

    $find('RadDockLatest').doPostBack('DockPositionChanged');}};                      //invoke this only for the latest RadDock
    Sys.Application.add_load(_addDock);"
    , dock.ClientID, _zone), true); 

  10. ManuelChavez
    ManuelChavez avatar
    1 posts
    Member since:
    Sep 2009

    Posted 03 May 2010 Link to this post

    What if I need to dynamic create Raddocks but without using a control event like the button_click?

    I mean, what if I have a table in SQL where I have a list of categories and depending on the number of categories I should create a dock?

    How can I approach it?

    I already created the docks, but the examples of saving layout or anything is working. Should I open a Ticked or thread or anything?

    Please help I already spend 1 day of work with this
  11. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 06 May 2010 Link to this post

    Hi Luis Martinez,

    I already answered your question in the ticket you sent. For your convenience I'm pasting the answer here.

    You should add the RadDock to the RadDockZone only or RadDockLayout. I removed the
    rdltSections.Controls.Add(rDock) from the CreateRadDock method and everything seems to be fine,

    Private Function CreateRadDock(ByVal iRadZone As Integer, ByVal iProgramID As Integer, ByVal strTitle As String, _
                                  ByVal bVisible As Boolean, ByVal itotalDocks As Integer, ByVal bLastDock As Boolean) As RadDock
        Dim rDock As New RadDock()
        Dim dtTable As New HtmlTable()
        dtTable.ID = "tbl" 'This table is for store the links ordered in 2 columns  
        rDock.ID = "rdock_" & iProgramID
        rDock.UniqueName = "rdock_" & iProgramID
        rDock.Title = strTitle
        rDock.Visible = bVisible
        rDock.Tag = iProgramID
        rDock.DockMode = DockMode.Docked
        rDock.ContentContainer.Controls.Add(dtTable)
        rdltSections.RegisteredZones(iRadZone - 1).Controls.Add(rDock)
        Return rDock
    End Function

    Let us know if you have any other questions.

    Sincerely yours,

    Petio Petkov
    the Telerik team

     


    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017