# Elements

## Content

The DashboardLayout control consists of the following elements as shown in the image.

![DashboardLayout Elements](https://cdn.mescius.io/document-site-files/images/ff3fa73b-228c-4f10-9cc6-7c137f26176a/images/dashboardlayoutelements.png)

### DashboardLayout

DashboardLayout is represented by <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/docs/win/online-dashboardlayout/\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-dashboardlayout/\u0022\u003e.NET Framework\u003c/a\u003e assemblies." data-popup-title="C1DashboardLayout" data-popup-theme="ui-tooltip-green qtip-green">C1DashboardLayout</span> class. It serves as the main container with an attached layout that defines how the child containers are arranged.

### Layout

The DashboardLayout element uses layout controls to create a layout for arranging child containers containing controls on the surface of the DashboardLayout control. It supports flow, grid and split layout types and each of them behave differently on resizing or arranging the child containers. Dashboard allows you to specify the type of layout using [LayoutType](/componentone/docs/win/online-dashboardlayout/) property of the [C1DashboardLayout](/componentone/docs/win/online-dashboardlayout/) class. The control communicates with the layout controls via the [ILayout](/componentone/docs/win/online-dashboardlayout/) interface. This interface can also be implemented for creating custom layouts.

### Child containers

When a control is dragged on the DashboardLayout control, a child container is automatically created to hold that control. These child containers can contain arbitrary content like text, images or any UI controls like charts, grids, maps etc. Depending on the layout you specify using the <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/docs/win/online-dashboardlayout/\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-dashboardlayout/\u0022\u003e.NET Framework\u003c/a\u003e assemblies." data-popup-title="LayoutType" data-popup-theme="ui-tooltip-green qtip-green">LayoutType</span> property, the child container is either Panel class or C1SplitterPanel class. Thus, if the LayoutType property is set to [LayoutType.Grid](/componentone/docs/win/online-dashboardlayout/) or [LayoutType.Flow](/componentone/docs/win/online-dashboardlayout/). the child container is represented by the Panel class and if it is set to [LayoutType.Split](/componentone/docs/win/online-dashboardlayout/), the child container is represented by the [C1SplitterPanel](/componentone/docs/win/online-dashboardlayout/) class.

The child containers can be accessed using Items property of the C1Dashboardlayout class as depicted below:

```vbnet
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).Dock = PanelDockStyle.Left
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).Text = ”Splitter Panel”
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).Collapsible = true
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).HeaderBackColor = Color.Green
```

```csharp
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).Dock = PanelDockStyle.Left;
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).Text = ”Splitter Panel”;
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).Collapsible = true;
((C1SplitterPanel)(c1DashboardLayout1.Items["Container1"].ItemContainer)).HeaderBackColor = Color.Green;
```