RadControls for WinForms

 

This tutorial creates a shell for a report viewer/explorer. A ToolWindow on the left represents a list of reports. The right side of the form in the RadDock contains three DocumentWindows, each representing a report. This tutorial demonstrates the layout of ToolWindow and DocumentWindows. It also demonstrates adding a RadTreeView control to one of the created windows and synchonizing the active DockWindow with the selection in the RadTreeView instance.

dock-getting-started 003

Configure the RadDock

  1. Drop a RadDock control on the form.
  2. Set the RadDock Dock property to Fill.
  3. Open the RadDockSmart Tag and select Show Advanced Layout Designer. This step will display the RadDock Advanced Layout Designer dialog.
  4. From RadRibbonBar navigation, click the left green arrow to dock a new ToolWindow to the left.

    dock-getting-started 001

    Note

    The list on the left side of the preview RadDock displays all the created ToolWindows. From this list you can set the visibility of the ToolWindows to false, if you do not need some of them visible at runtime initially. 

  5. From the RadRibbonBar navigation, click on the Add DocumentWindow button to add a new DocumentWindow instance.
  6. Click on the Add DocumentWindow two more times. The RadDock Advanced Layout Designer dialog should look like the example screenshot below.
  7. Click Save and Close button to close the dialog and save the layout to the RadDock.

    dock-getting-started 002

    For more complex scenarios RadDock advanced layout designer provides full drag and drop and user interaction support in the preview RadDock control. This allows you to the dock a ToolWindow to bottom-right, to set a ToolWindow in AutoHide mode or even to float a ToolWindow.

    Caution

    The real layout of RadDock which is displayed at runtime is available only through RadDock Advanced Layout Designer. I.e. if you have hidden, auto-hidden or floating ToolWindows, they will be shown as such only in the advanced designer. In Visual Studio IDE we display ToolWindows in their docked state, which allows you to place and layout your controls in them.

  8. In the designer select the ToolWindow on the left. You can verify this by checking the Properties Window that the currently selected component is ToolWindow and not the docking manager.
  9. Set the ToolWindow Text property to "Reports".
  10. Select one of the DocumentWindows. To do this in the designer, select the tab (i.e. on "Document1"), then click inside the client area. Check the Properties Window that you have selected a DocumentWindow.
  11. Set the DocumentWindow Name property to "dpProductListing" and Text property to "Product Listing".
  12. Select the next DocumentWindow, set the Name property to "dpProductByCategory" and the Text property to "Product By Category".
  13. Select the last DocumentWindow, set the Name property to "dpTop10Customers" and Text property to "Top 10 Customers".
  14. Drop a RadTreeView control to the "Reports" ToolWindow, set the tree view Dock property to Fill.
  15. In the code for the form add references to Telerik.Wincontrols.UI and Telerik.Wincontrols.UI.Docking in the "using" (C#) or "Imports" (VB) section of the code.
    Copy[C#] Include namespaces
    using Telerik.WinControls.UI;
    using Telerik.WinControls.UI.Docking;
    Copy[VB.NET] Include namespaces
    Imports Telerik.WinControls.UI
    Imports Telerik.WinControls.UI.Docking
  16. Create a Form Load event handler and copy the code below to it. This code builds the TreeView node structure and links the Name of each DocumentWindow to the corresponding Node Tag property. Each dockable object has a Name property, a String that uniquely identifies it. Later we use the Name to locate the DocumentWindow and activate it.
    Copy[C#] Initializing RadTreeView
    void Form1_Load(object sender, EventArgs e)
    {
        RadTreeNode productNode = radTreeView1.Nodes.Add("Product Reports");
        RadTreeNode customerNode = radTreeView1.Nodes.Add("Customer Reports");
        RadTreeNode productListingNode = new RadTreeNode("Product Listing");
        productListingNode.Tag = dwProductListing.Name;
        RadTreeNode productCategoryNode = new RadTreeNode("Product By Category");
        productCategoryNode.Tag = dwProductByCategory.Name;
        RadTreeNode top10CustomerNode = new RadTreeNode("Top 10 Customers");
        top10CustomerNode.Tag = dwTop10Customers.Name;
        productNode.Nodes.Add(productListingNode);
        productNode.Nodes.Add(productCategoryNode);
        customerNode.Nodes.Add(top10CustomerNode);
        radTreeView1.ExpandAll();
    }
    Copy[VB.NET] Initializing RadTreeView
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim productNode As RadTreeNode = RadTreeView1.Nodes.Add("Product Reports")
        Dim customerNode As RadTreeNode = RadTreeView1.Nodes.Add("Customer Reports")
        Dim productListingNode As New RadTreeNode("Product Listing")
        productListingNode.Tag = dwProductListing.Name
        Dim productCategoryNode As New RadTreeNode("Product By Category")
        productCategoryNode.Tag = dwProductByCategory.Name
        Dim top10CustomerNode As New RadTreeNode("Top 10 Customers")
        top10CustomerNode.Tag = dwTop10Customers.Name
        productNode.Nodes.Add(productListingNode)
        productNode.Nodes.Add(productCategoryNode)
        customerNode.Nodes.Add(top10CustomerNode)
        RadTreeView1.ExpandAll()
    End Sub
  17. Create an SelectedNodeChanged event handler and add the following code to it. The code for this event handler verifies that the Tag of the selected node has a value. Further, if this value corresponds to the name of an existing window in RadDock, the appropriate DocumentWindow gets activated.
    Copy[C#] Handling the RadTreeView SelectedNodeChanged event
    void radTreeView1_SelectedNodeChanged(object sender, RadTreeViewEventArgs e)
    {            
        if (e.Node.Tag != null)
        {
            DockWindow dw = this.radDock1[e.Node.Tag.ToString()];
            if (dw != null)
            {
                this.radDock1.ActiveWindow = dw;
            }
        }
    }
    Copy[VB.NET] Handling the RadTreeView SelectedNodeChanged event
    Private Sub RadTreeView1_SelectedNodeChanged(ByVal sender As Object, ByVal e As RadTreeViewEventArgs)
        If Not e.Node.Tag Is Nothing Then
            Dim dw As DockWindow = Me.RadDock1(e.Node.Tag.ToString())
            If Not dw Is Nothing Then
                Me.RadDock1.ActiveWindow = dw
            End If
        End If
    End Sub

Press F5 to run the application. Try experimenting with...

  • Dragging the panel and document tabs
  • Right-clicking document and panel tabs.
  • Pressing Ctrl-Tab to invoke the Quick Navigator.
  • Pinning and un-pinning the DockWindow.
  • Using the ToolWindow and DocumentWindow menus by clicking the downward arrows.
RELATED VIDEOS
The new and improved RadDock for WinForms has landed and this is your opportunity to get a first look. Join Developer Evangelist John Kellar as he shows you how quickly you can get up and running with the new version of RadDock. John will cover the new features so you know what to expect and how you can use RadDock in your applications once it is officially released. (Runtime: 32:54)

Introducing the new RadDock for WinForms

In this video, you will learn how to get started with the run-time and design-time features in the new RadDock for WinForms. You will see the rich RadDock run-time features in action and you will see how easy it is to get started with RadDock in Visual Studio. You will also be introduced to the new Advanced Layout Designer for RadDock, a design-time tool that makes it easy to customize yoru RadDock layouts. (Runtime: 09:42)

Getting Started with RadDock for WinForms