This quick start will guide you through the steps of adding C1DashboardLayout control to create a simple dashboard application. Follow the steps below to get started:

1. Setting up the application
2. Create a datasource for DashboardLayout
3. Add controls to DashboardLayout

The following image shows a dashboard created using the C1DashboardLayout control.

Step 1: Setting up the application

1. Create a new WinForms application.
2. Add the C1DashboardLayout control to the form.
3. In the Properties window, navigate to LayoutType property and set it to Flow.
   Observe: The C1DashboardLayout control is docked in the form and a layout of the type Flow is attached to it.
4. Set the height of the form to 1000 and width to 1100.

Step 2: Create a datasource for DashboardLayout

1. Go to the Project menu and select Add New Data Source from the Project dropdown menu.
   The Data Source Configuration Wizard dialog box appears.
2. Select Database and click Next.
3. Select Dataset and click Next.
4. Click New Connection.
5. Select Data source as Microsoft Access Database File (OLEDB).
6. Click Browse to add a database file name as C1NWind.mdb by navigating to its default location,
   C:\Users\Documents\ComponentOne Samples\Common.
7. Select C1NWind database, click Open, and then click OK.
8. Click the Next button to continue. A dialog box appears asking if you would like to add the data file to your project and modify the connection string. Since it is not necessary to copy the database to your project, click No.
9. Verify that Yes, save the connection as check box is checked and click Next to continue. The connection string is saved as C1NwindConnectionString.
10. Expand the Views node and select Category Sales for 2014, Sales by Category and Ten Most Expensive Products objects.
11. Click Finish.
    Observe: C1NwindDataSet.xsd is added to your project.

Step 3: Add controls to DashboardLayout

1. Drag and drop the C1FlexGrid control on the DashboardLayout.
   Observe: A child container (Panel) automatically gets created under FlexGrid. It positions itself at the upper left corner of the flow layout since its FlowDirection property is set to LeftToRight by default.
2. Navigate to the DataSource property of the FlexGrid control and select C1NwindDataSet to bind the control to the data source.
   Observe: A binding source gets created and the DataSource property is set to c1NwindDataSetBindingSource.
3. Set the DataMember property to Sales by Category.
4. Now, drag and drop a FlexPie on the DashboardLayout.
   Observe: Since the width of the C1DashboardLayout has not yet exhausted, the child container containing the FlexPie positions itself next to the FlexGrid maintaining the default LeftToRight flow direction.
5. Navigate to the DataSource property of FlexPie and select the already created c1NwindDataSetBindingSource.
6. Set the DataMember property to Category Sales for 2014, Binding property to CategorySales and BindingName property to CategoryName.
7. Drag and drop the FlexChart control on the DashboardLayout.
   Observe: The child container containing the FlexChart control is wrapped to the next row as the width of the DashboardLayout has exhausted and the WrapContents property of the flow layout is set to true. Otherwise, the child container gets clipped.
8. Navigate to the DataSource property of FlexChart and select c1NwindDataSetBindingSource. Set the DataMember property to Ten Most Expensive Products, Binding property to UnitPrice and BindingX property to TenMostExpensiveProducts.
9. Add the following code in Form1_Load event to populate the controls with data:
   • Visual Basic
   • C#

   • Visual Basic

   Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
       Dim salesByCategoryAdapter As C1NWindDataSetTableAdapters.Sales_by_CategoryTableAdapter = New C1NWindDataSetTableAdapters.Sales_by_CategoryTableAdapter()
       salesByCategoryAdapter.Fill(c1NWindDataSet.Sales_by_Category)
       Dim categorySalesAdapter As C1NWindDataSetTableAdapters.Category_Sales_for_2014TableAdapter = New C1NWindDataSetTableAdapters.Category_Sales_for_2014TableAdapter()
       categorySalesAdapter.Fill(c1NWindDataSet.Category_Sales_for_2014)
       Dim expensiveProductsAdapter As C1NWindDataSetTableAdapters.Ten_Most_Expensive_ProductsTableAdapter = New C1NWindDataSetTableAdapters.Ten_Most_Expensive_ProductsTableAdapter()
       expensiveProductsAdapter.Fill(c1NWindDataSet.Ten_Most_Expensive_Products)
   End Sub
   

   • C#

   private void Form1_Load(object sender, EventArgs e)
   {
       C1NWindDataSetTableAdapters.Sales_by_CategoryTableAdapter salesByCategoryAdapter = 
           new C1NWindDataSetTableAdapters.Sales_by_CategoryTableAdapter();
       salesByCategoryAdapter.Fill(c1NWindDataSet.Sales_by_Category);
   
       C1NWindDataSetTableAdapters.Category_Sales_for_2014TableAdapter categorySalesAdapter = 
           new C1NWindDataSetTableAdapters.Category_Sales_for_2014TableAdapter();
       categorySalesAdapter.Fill(c1NWindDataSet.Category_Sales_for_2014);
   
       C1NWindDataSetTableAdapters.Ten_Most_Expensive_ProductsTableAdapter expensiveProductsAdapter = 
           new C1NWindDataSetTableAdapters.Ten_Most_Expensive_ProductsTableAdapter();
       expensiveProductsAdapter.Fill(c1NWindDataSet.Ten_Most_Expensive_Products);
   }
   

10. Run the application. A simple dashboard with three child containers is displayed.