Dynamic RadDockLayout, RadDockZone and RadDock

[Sean]

I have a need to create ALL 3 of these dynamically/in code please do not just point me to the 'Dynamic RadDock Only' example.....I've tried many different methods and so far all have failed mostly because I think I'm doing something funny in the lifecycle.....Can someone provide me with a quick Clif's Notes/Page Lifecycle path for accomplishing this?

So far dynamic creation is not the problem it is page postbacks and attempting to save the Layout's/Zone's/Dock's that is frustrating me.

[Golu]

Dear sir,
I would also like this funcationing
I woluld like to create zones dynamically and after that dock and usercontrols. zones are created successfully, but how to fine that created zone so that add a dock.

code as follows :

protected void btnAddZone_Click(object sender, EventArgs e)
    {
        RadDockZone dz = CreateRadDockZone();      
       ViewState["ZoneID"] = dz.ID;
        rdDockLayout.Controls.Add(dz);
    }

    private RadDockZone CreateRadDockZone()
    {
        RadDockZone zone = new RadDockZone();
        zone.UniqueName = "Zone" + Guid.NewGuid().ToString();
        zone.ID = "RadDockZone1";// string.Format("RadDockZone{0}", zone.UniqueName);
        zone.Width = Unit.Pixel(Convert.ToInt32(txtZoneWidth.Text));
        zone.FitDocks = true;
        zone.Orientation = Orientation.Horizontal;
        zone.Attributes.Add("Style", "background: #f5f4e8; float: left;");
        zone.Skin = "Office2007";

        return zone;
    }

protected void btnAddDock_Click(object sender, EventArgs e)
    {    
           RadDock dock = CreateRadDock();
//            RadDockZone dz = (RadDockZone)FindControl(Convert.ToString(ViewState["ZoneID"]));
that's not working, how to find ZONE ?

             CreateSaveStateTrigger(dock);
            dock.Tag = strDockTag;

            LoadWidget(dock);
        }

can any one suggest me ...(please answere me ASAP its very very urgent)

thanks with reagrds

[Obi-Wan Kenobi]

If you create  RadDockZones and RadDocks dynamically you should create them in PageInit.
You can use RadDockLayout1.RegisteredZones and RadDockLayout1.RegisteredDocks collections to find a RadDock or a RadDockZone.
Hope this helps.

[Obi-Wan Kenobi]

 RadDock Lifecycle is described here:
http://www.telerik.com/help/aspnet-ajax/dock_dockcontrollifecycle.html

[Golu]

Dear sir,
thank you 4 replying

I have done all these..
 private List<string> CurrentDockZoneIds
    {
        get
        {
            List<string> _currentDockZoneIds = (List<string>)Session["CurrentDockZoneIds"];
            if (Object.Equals(_currentDockZoneIds, null))
            {
                _currentDockZoneIds = new List<string>();
                Session["CurrentDockZoneIds"] = _currentDockZoneIds;
            }
            return _currentDockZoneIds;
        }
        set
        {
            Session["CurrentDockZoneIds"] = value;
        }
    }

 protected void Page_InIt(object sender, EventArgs e)
    {
            //--Created zone
            for (int i = 0; i < CurrentDockZoneIds.Count; i++)
            {
                createRadDockZone(CurrentDockZoneIds[i]);
            }
}

 protected void btnAddZone_Click(object sender, EventArgs e)
    {
        createRadDockZone(null);
    } 
 protected void btnSaveDock_Click(object sender, EventArgs e)
    {
        try
        {
            //--Save Dock states in Database
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

            stateList = rdDockLayout.GetRegisteredDocksState(); //-- not working
          
            while (i < stateList.Count)
            {
                serializedList.Append(serializer.Serialize(stateList[i]));
                serializedList.Append("|");
                i++;
            }
            dockState = serializedList.ToString();
            if (dockState.Trim() != String.Empty)
            {
                objDockStateWS = new DockStateWS();
                dsDataSet = new DataSet();
                dsDataSet = objDockStateWS.Save_Dock_State(0, 2, dockState);
            }
        }
        catch (Exception ex)
        {
            LogMessage(ex, 1);
        }
    }

once we add zone and then load user control, and wants to save that state in database but its method "rdDockLayout.GetRegisteredDocksState(); " is not working, its show count = 0 always.
can u give me source code of how to create zone, and add user controls in a dock (all the dynamically)
and save that state in database. when user login its show its previosuly added states.

I hope you understand my problem?
(I am creating a dashboard and its fully customised (depends on user choice))

thanks with regards

[Obi-Wan Kenobi]

You should create your own mechanism to store the RadDockZones state. There is not such built-in mechanism in the RadDock control.
rdDockLayout.GetRegisteredDocksState(); - will return only the RadDocks state, but In your code you don't add RadDocks.

[Sean]

Wouldn't saving the RadDockLayout in a Session store the zones as well?

[Sean]

My custom RadDockLayout

public class ADCLayout : RadDockLayout, INamingContainer
  {
    public ADCLayout(){}

    private List<DockState> CurrentDockStates
    {
      get
      {
        List<DockState> _currentDockStates = (List<DockState>)HttpContext.Current.Session [ string.Format("CurrentDockStates_{0}", this.UniqueID) ];
        if(Object.Equals(_currentDockStates, null))
        {
          _currentDockStates = new List<DockState>();
          HttpContext.Current.Session [ string.Format("CurrentDockStates_{0}", this.UniqueID) ] = _currentDockStates;
        }
        return _currentDockStates;
      }
      set
      {
        HttpContext.Current.Session [ string.Format("CurrentDockStates_{0}", this.UniqueID) ] = value;
      }
    }


    protected void ADCLayout_SaveDockLayout(object sender, DockLayoutEventArgs e)
    {
      CurrentDockStates = this.GetRegisteredDocksState();
    }

    protected override void OnInit(EventArgs e)
    {
      base.OnInit(e);
      this.SaveDockLayout += new DockLayoutEventHandler(ADCLayout_SaveDockLayout);
      this.LoadDockLayout += new DockLayoutEventHandler(ADCLayout_LoadDockLayout);
      for(int i = 0; i < CurrentDockStates.Count; i++)
      {
        DragDropTextBox dock = new DragDropTextBox();
        dock.ID = string.Format("RadDock{0}", i);
        dock.ApplyState(CurrentDockStates [ i ]);
        this.Controls.Add(dock);
      }
    }

    protected void ADCLayout_LoadDockLayout(object sender, DockLayoutEventArgs e)
    {
      foreach(DockState state in CurrentDockStates)
      {
        e.Positions [ state.UniqueName ] = state.DockZoneID;
        e.Indices [ state.UniqueName ] = state.Index;
      }
    }

  }

My custom RadDock definition

public class DragDropTextBox : RadDock, INamingContainer
{

    public DragDropTextBox()
    {
      this.DockHandle = DockHandle.Grip;
      this.Required   = true;
    }

    public string LabelText
    {
      get;
      set;
    }
    public bool Required
    {
      get;
      set;
    }


    protected override void OnInit(EventArgs e)
    {
      TextBox label     = new TextBox();
      label.Text        = this.LabelText;
      label.BorderStyle = BorderStyle.None;
      this.ContentContainer.Controls.Add(label);

      TextBox entryText = new TextBox();
      this.ContentContainer.Controls.Add(entryText);

      if(Required)
        this.ContentContainer.Controls.Add(new LiteralControl("<span class=\"required\">*</span>"));

      base.OnInit(e);
    }
}

My custom user control that defines the number of columns and rows of RadDock Layouts and zones to create...each TD has its own RadDockLayout and RadDock Zone dynamically

public class CustomLayoutsAndZones : WebUserControl, INamingContainer
  {
    int _rowCount = 1;
    int _columnCount = 1;

    public CustomLayoutsAndZones()
    {
    }

    protected override void OnInit(EventArgs e)
    {
      HtmlTable table = new HtmlTable();
      table.CellPadding = 0;
      table.CellSpacing = 0;
      table.Width = "100%";
      table.SkinID = "Appraisaldotcom";

      for(int i = 0; i < this.RowCount; i++)
      {

        HtmlTableRow row = new HtmlTableRow();

        for(int j = 0; j < this.ColumnCount; j++)
        {
          ADCLayout rdLayout = new ADCLayout();

          // ClientID_ZoneLayout_Row_Column && ClientID_Zone_Row_Column
          string key = string.Format("{0}_ZoneLayout_{1}_{2}", this.ClientID, i, j);
          string zoneKey = string.Format("{0}_Zone_{1}_{2}", this.ClientID, i, j);

          RadDockZone rdzColumn = new RadDockZone();
          rdzColumn.ID = zoneKey;
          rdzColumn.UniqueName = zoneKey;

          if(this.ColumnLayouts.Count > 0)
          {
            if(this.ColumnLayouts.ContainsKey(key))
            {
              rdLayout = this.ColumnLayouts [ key ];
            }
            else
            {
              //SM THIS IS DUPLICATED CODE
              rdLayout.ID = key;

              // Add the DockZone/Column to the Layout
              rdLayout.Controls.Add(rdzColumn);

              // Add the layout to the global layout list for later use
              this.ColumnLayouts.Add(rdLayout.UniqueID, rdLayout);
            }
          }
          else
          {
            rdLayout.ID = key;

            // Add the DockZone/Column to the Layout
            rdLayout.Controls.Add(rdzColumn);

            // Add the layout to the global layout list for later use
            this.ColumnLayouts.Add(rdLayout.UniqueID, rdLayout);
          }

          HtmlTableCell htc = new HtmlTableCell();
          htc.Width = string.Format("{0}%", (100 / this.ColumnCount).ToString());
          htc.VAlign = "top";

          // Add the Layout to the Table Cell
          htc.Controls.Add(rdLayout);

          row.Cells.Add(htc);

        }

        table.Rows.Add(row);
      }

      this.Controls.Add(table);
      base.OnInit(e);
    }


    public int ColumnCount
    {
      get
      {
        EnsureChildControls();
        return _columnCount;
      }
      set
      {
        EnsureChildControls();
        _columnCount = value;
      }
    }

    public int RowCount
    {
      get
      {
        EnsureChildControls();
        return _rowCount;
      }
      set
      {
        EnsureChildControls();
        _rowCount = value;
      }
    }


    public Dictionary<string, ADCLayout> ColumnLayouts
    {
      get
      {
        Dictionary<string, ADCLayout> _currentDockLayouts = (Dictionary<string, ADCLayout>)HttpContext.Current.Session [ string.Format("ColumnLayouts_{0}", this.UniqueID) ];
        if(Object.Equals(_currentDockLayouts, null))
        {
          _currentDockLayouts = new Dictionary<string, ADCLayout>();
          HttpContext.Current.Session [ string.Format("ColumnLayouts_{0}", this.UniqueID) ] = _currentDockLayouts;
        }
        return _currentDockLayouts;
      }
      set
      {
        HttpContext.Current.Session [ string.Format("ColumnLayouts_{0}", this.UniqueID) ] = value;
      }
    }


  }

Using the custom user control

public partial class NameAddressPhone : CustomLayoutsAndZones, INamingContainer
   {
      DragDropTextBox _txtFirstName = new DragDropTextBox();

      protected void Page_Load( object sender, EventArgs e ){}

      public DragDropTextBox FirstNameTextBox
      {
        get
        {
          this.EnsureChildControls();
          return this._txtFirstName;
        }
        set
        {
          this._txtFirstName = value;
        }
      }

      protected override void OnInit(EventArgs e)
      {
        this.ColumnCount = 3;
        base.OnInit(e);

        // First Name
        _txtFirstName.LabelText  = "First Name:";
        _txtFirstName.ID         = "txtFirstName";
        _txtFirstName.UniqueName = Guid.NewGuid().ToString();


        if (!Page.IsPostBack)
        {
          this.ColumnLayouts[this.ClientID + "_ZoneLayout_0_0"].RegisteredZones[0].Controls.Add(this._txtFirstName);
        }

      }

   }

The script manager is placed on the master page. When I click a button and post back I get the "Script controls may not be registered after PreRender" error

[Obi-Wan Kenobi]

As far as I know you shouldn't save server controls in Session. Try to "serialize" the RadDockLayout info about the RadDockZones into a string and after that add the string to the Session.

[Sean]

Gotcha so create my own serialization type mechanism that walks the layouts control and stores it in a session/string something like

Layout =
~Row1Column1Zone||Dock1|dockunique:mydock::dockrequired:true::docklabel:"My dock label"
~Row1Column2Zone||Dock1|dockunique:r1c2d1::dockrequired:true::docklabel:"another label"
                                    Dock2|dockunique:r1c2d2::dockrequired:false::docklabel:"another label"
    ~

Then on postback if that string/session variable exists re-read/recreate the controls....sound about right?

[Obi-Wan Kenobi]

This is exactly what I mean.

[Sean]

sorry if this is a dumb question but what event would call the save?

I can put it into the session on initial create...but what fires "SaveDockLayout"? So that when the docks are moved and the user clicks "Save My Layout" it walks the steps to recreate them again and reassigns the new layout to the session

[Obi-Wan Kenobi]

You can find a useful information about the RadDock Lifecycle here:
http://www.telerik.com/help/aspnet-ajax/dock_dockcontrollifecycle.html
The SaveDockLayout and LoadDockLayout events are fired from the RadDockLayout control.
 If you want to save the state only when a button is clicked, you could use a flag,e.g.

bool saveState = false;
protected void buttonSaveStateClicked(object sender,EventArgs e)
{
    saveState = true;
}

 

protected

 

void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)
{
    if(saveState == true)
    {
        //SAVE RadDocks state
    }
}

 

[NIRAKAR]

Hi


The master teams answer about rad dock for portal page is not satisfy in all threads. If master/developer team will give one complete example (like netvibes.com), we will understand properly.


Nirakar.