RadDock for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

When implementing a dynamic personalized Portal site using the techniques described in Dynamically Creating RadDock Controls, the dynamically created controls often contain specialized custom controls. When re-creating the RadDock controls after a postback, the application needs to re-create these custom controls as well. The following example shows one way to accomplish this.

  1. Create a new AJAX-enabled Web application.

  2. In order to add some custom controls to your application, locate the "Live Demos\Dock\Examples" folder under your installation directory and drag the "Default" folder from there to your solution in the Solution Explorer. Delete the "Default.html", "DefaultCS.aspx", and "DefaultVB.aspx" files. The Solution Explorer should looks something like the following screen shot:

     

  3. To let the user select a control to add to the page, drag a DropDownList from the toolbox onto your page. Click on the ellipsis button next to its Items property, and add five items, setting the following properties:

    1. Text="ExchangeRates.ascx", Value="~/Default/ExchangeRates.ascx", Selected=True

    2. Text="Horoscopes.ascx", Value="~/Default/Horoscopes.ascx"

    3. Text="News.ascx", Value="~/Default/News.ascx"

    4. Text="Pictures.ascx", Value="~/Default/Pictures.ascx"

    5. Text="Weather.ascx", Value="~/Default/Weather.ascx"

  4. Drag a Button from the toolbox onto the page, and set its Text property to "Add Dock";

  5. Add a RadDockLayout with a few RadDockZone controls inside it.

  6. Just like in the Dynamically Creating RadDock Controls topic, add a property for storing the current dock states:

    1. At the top of the codebehind for your Web page, add two new using statements (C#) or Imports statements (VB) for System.Collections.Generic and Telerik.Web.UI:

      CopyC#
      using System.Collections.Generic;
using Telerik.Web.UI;
      CopyVB.NET
      Imports System.Collections.Generic
Imports Telerik.Web.UI

    2. Add the following property definition to the class definition of your Web page:

  7. Add a Click event handler to the Button on the Web page. This event handler creates a new RadDock control, creates a custom control inside it, and adds it to the first RadDockZone control. Note that the Tag property is used to store the information needed to create the custom control:

    CopyC#
    private RadDock CreateRadDock()
{
 int docksCount = CurrentDockStates.Count;
 RadDock dock = new RadDock();
 dock.ID = string.Format("RadDock{0}", docksCount);
 dock.Title = string.Format("Dock {0}", docksCount);
 dock.UniqueName = Guid.NewGuid().ToString();
 dock.Width = Unit.Pixel(300);
 return dock;
}
protected void Button1_Click(object sender, EventArgs e)
{
  RadDock dock = CreateRadDock();
  dock.Tag = DropDownList1.SelectedValue;
  LoadWidget(dock);
  RadDockZone1.Controls.Add(dock);
}

private void LoadWidget(RadDock dock)
{
  if (string.IsNullOrEmpty(dock.Tag))
   return;
  Control widget = LoadControl(dock.Tag);
  dock.ContentContainer.Controls.Add(widget);
}
    CopyVB.NET
    Private Function CreateRadDock() As RadDock
    Dim docksCount As Integer = CurrentDockStates.Count
    Dim dock As New RadDock()
    dock.ID = String.Format("RadDock{0}", docksCount)
    dock.Title = String.Format("Dock {0}", docksCount)
    dock.UniqueName = Guid.NewGuid().ToString()
    dock.Width = Unit.Pixel(300)
    Return dock
End Function
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    Dim dock As RadDock = CreateRadDock()
    dock.Tag = DropDownList1.SelectedValue
    LoadWidget(dock)
    RadDockZone1.Controls.Add(dock)
End Sub
Private Sub LoadWidget(ByVal dock As RadDock)
    If String.IsNullOrEmpty(dock.Tag) Then
        Return
    End If
    Dim widget As Control = LoadControl(dock.Tag)
    dock.ContentContainer.Controls.Add(widget)
End Sub

  8. Add code to save and load the state of dynamically created controls when a postback occurs.

    1. Add a SaveDockLayout event handler to the RadDockLayout component. This event handler calls the RadDockLayout.GetRegisteredDocksState method to obtain the current list of dock states and saves the list to the CurrentDockStates property.

    2. Add a Page_Init event handler that recreates the RadDock controls (including their child custom controls) after a postback:

    3. Add a LoadDockLayout event handler so that the RadDockLayout can restore the layout:

      Tip

      To improve performance, you may want to use a hidden update panel for creating the RadDock controls and move them to their docking zones in a client-side script. See My Portal for a live example that uses this technique.

See Also