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

Multiple Dynamic Docks creation

9 Answers 319 Views
Dock
This is a migrated thread and some comments may be shown as answers.
madhu
Top achievements
Rank 1
madhu asked on 30 May 2007, 10:45 PM
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.




9 Answers, 1 is accepted

Sort by
0
Valeri Hristov
Telerik team
answered on 04 Jun 2007, 01:51 PM
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
0
madhu
Top achievements
Rank 1
answered on 04 Jun 2007, 02:48 PM
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

0
Valeri Hristov
Telerik team
answered on 04 Jun 2007, 03:42 PM
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
0
Dodi
Top achievements
Rank 1
answered on 08 Oct 2008, 10:35 AM
 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);

}

}

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 10 Oct 2008, 02:11 PM
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!

0
Priya
Top achievements
Rank 1
answered on 06 Nov 2008, 10:55 AM

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

0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 06 Nov 2008, 01:22 PM
 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); 

0
ManuelChavez
Top achievements
Rank 1
answered on 04 May 2010, 12:45 AM
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
0
Petio Petkov
Telerik team
answered on 06 May 2010, 11:30 AM
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.
Tags
Dock
Asked by
madhu
Top achievements
Rank 1
Answers by
Valeri Hristov
Telerik team
madhu
Top achievements
Rank 1
Dodi
Top achievements
Rank 1
Obi-Wan Kenobi
Top achievements
Rank 1
Priya
Top achievements
Rank 1
ManuelChavez
Top achievements
Rank 1
Petio Petkov
Telerik team
Share this question
or