NOTE: This blog entry is specific to the old DockingManager control. If you are interested in using the latest version of the TCEK w/the RadDock, I've posted an updated blog entry here.

Welcome to the fourth tutorial in my series of tutorials about the Telerik CAB Enabling Kit. This week, we will learn how to use the RadDockableWorkspace. I will be using the completed project from tutorial 2 as a base for this project. If you have not completed the second tutorial, I suggest doing so before completing this tutorial. You can find it here. Otherwise, click here to download the source code that we will be using, fire up visual studio, and lets begin.

Adding the RadDockableWorkspace

In this section, we will replace the current workspace with a RadDockableWorkspace. The RadDockableWorkspace works differently than the tradition CAB workspace controls. We will actually be using a DockingManager control in the ShellLayoutView instead of an actual workspace style control. The RadDockableWorkspace will instead be created and added in Module.cs with the DockingManager being passed into it as one of its parameters.

1. In the solution explorer, expand the Infrastructure.Layout project and open ShellLayoutView.cs in the designer.
   1. Select and delete the DeckWorkspace control named _mainWorkspace. 
   2. Drag a DockingManager from the toolbox into the design view and dock it to fill. 
   3. Name the DockingManager _mainDockWorkspace. 
2. View the source code for ShellLayoutView.cs
   1. Update the constructor by commenting out the initialization code for the old workspace.
      

      public ShellLayoutView()

      {

      InitializeComponent();

      //_mainWorkspace.Name = WorkspaceNames.MainWorkspace;

      }

3. Expose the DockingManager as a property of ShellLayoutView.
   

   public DockingManager MainDockWorkspace

   {

   get { return _mainDockWorkspace; }

   }

4. View the source code for Module.cs
   1. In the Load() method, create and initialize a RadDockableWorkspace, passing in the DockingManager and ShellLayoutView as its parameters. Add the RadDockableWorkspace to the workspaces collection in the RootWorkItem.
      

      // Add the RadDockableWorkspace to be used as the primary view

      RadDockableWorkspace dockWorkspace = new RadDockableWorkspace(_shellLayout.MainDockWorkspace, _shellLayout);

      _rootWorkItem.Workspaces.Add(dockWorkspace, WorkspaceNames.MainWorkspace);

Adding the DockingSmartPartInfo

As you probably already know, the SmartPartInfo is the lifeline of views added to a workspace. It is responsible for telling the workspace the properties of the container in which it will be placed. In this case, that container is an IDockable.

1.  In the solution explorer, expand the AssetManager project and open AssetListing.cs in the designer.
2. Drag a DockingSmartPartInfo from the toolbox to the designer.
3. Select dockingSmartPartInfo1 and update the following properties.
   1. Title: Asset Listing
   2. DockPosition: Fill
   3. Width: 700
   4. TabStripVisible: False

Adding The ToolBox View

In this step, we will add a new view so that we can show the full usage of the RadDockableWorkspace. We will also wire up some buttons on the view to invoke our commands we implemented during the second tutorial.

1. Right click the Views folder and select Smart Client Factory->Add View (with presenter)…
   1. Name the new view ToolBoxView and click Finish to generate it.
2. Open ToolBoxView.cs in the designer.
   
   1. Add three RadButtons to the view.
      
      1. Name the three buttons btnAddAsset, btnRemoveAsset, btnEditAsset respectively.
      2.  Set the text properties of each button to be descriptive of its function.
   2. Drag a DockingSmartPartInfo from the toolbox into the designer.
      1. Select dockingSmartPartInfo1 and update the following properties.
         1. Title: Tool Box
         2. Width: 200
         3. TabStripVisible: False
   3. View the source code for ToolBoxView.cs
      1. Update the OnLoad() method to add invokers to each of the buttons for our commands.
         

         protected override void OnLoad(EventArgs e)

         {

         _presenter.OnViewReady();

         base.OnLoad(e);

         // Add invokers to the toolbox buttons

         _presenter.WorkItem.Commands[CommandNames.AddAsset].AddInvoker(btnAddAsset, "Click");

         _presenter.WorkItem.Commands[CommandNames.RemoveAsset].AddInvoker(btnRemoveAsset, "Click");

         _presenter.WorkItem.Commands[CommandNames.EditAsset].AddInvoker(btnEditAsset, "Click");

         }

   4. View the source for ModuleController.cs
      1. Update the AddViews method to add the toolbox view to the RadDockWorkspace.
         

         private void AddViews()

         {

         AssetListing view = ShowViewInWorkspace<AssetListing>(WorkspaceNames.MainWorkspace);

         ToolBoxView toolBoxView = ShowViewInWorkspace<ToolBoxView>(WorkspaceNames.MainWorkspace);

         }

Conclusion

If you are wondering why I didn’t cover theming for this workspace like I did for the RadTabWorkspace, there is a simple explanation. The RadTabWorkspace actually inherits from a RadTabStrip and therefore loses its default namespace information required by themes. In the case of the RadDockableWorkspace, we are actually using a DockingManager directly in our layout and wrapping it with a RadDockableWorkspace when we add it to the Workspaces collection. This means we can simply drag a theme control from the toolbox to our LayoutView and apply it to the DockingManager directly.

Click here to download the source code used in this post.