This topic guides you through the steps to create a lead conversion dashboard using split layout. It displays the lead conversion ratio, sales in different countries in a pie chart, and sales details of companies in a FlexGrid.

1. Create a new Windows Form application.
2. Drag and drop a DashboardLayout control from the Toolbox onto your form.
   Observe: By default, a layout of the type Split is attached to it.
3. Select the DashboardLayout control. In the Properties window, set it's Dock property to Fill.
4. Click inside the DashboardLayout control. The SplitContentPanel (layout control attached to the DashboardLayout by default) is selected.
   Note that when the DashboardLayout’s LayoutType property is set to Split, child containers are not created automatically on dragging or dropping controls on the DashboardLayout as in other two layout types (Grid and Flow). Child containers have to be added manually to the DashboardLayout control.
5. Click on the SplitContentPanel’s smart tag to open its Tasks Menu. Select Add Panel from the DashboardSplitContainer Tasks menu.
   A child container of the type C1SplitterPanel is added to the DashboardLayout control.
6. Now add two more panels using the Add Panel option from the DashboardSplitContainer Tasks menu.
   Observe: All the three panels namely C1SplitterPanel1, C1SplitterPanel2 and C1Splitterpanel3 are aligned one below the other horizontally.
7. Select C1SplitterPanel2 and set its Dock property to Left.
8. Drag and drop a FlexGrid control on C1SplitterPanel1. Set C1SplitterPanel1’s Text property to Sales Details.
   This sets the text for C1SplitterPanel header.
9. Add a class named SalesDetails.cs to the project and copy the following code to it to add data for FlexGrid.

   C#

   コードのコピー

   public class SalesDetails { public SalesDetails(string companyName, double salesValue, double weighted,string salesStage) { CompanyName = companyName; SalesValue = salesValue; Weighted = weighted; SalesStage = salesStage; } public SalesDetails() { } public string CompanyName { get; set; } public double SalesValue { get; set; } public double Weighted { get; set; } public string SalesStage { get; set; } public List<SalesDetails> GetData() { string[] companyNames = { "Agilent Technologies", "Belo Co.", "Calpine Co.", "Crompton Corp.", "Exelon Inc.", "Delphi Corp.", "Ferro Co.","Gateway Inc.","Harris Corp."}; string[] salesStages={"Qualified", "Lead", "Qualified", "Proposal", "Negotiation", "Won", "Lost","Lead","Proposal"}; List<SalesDetails> salesDetailsList = new List<SalesDetails>(); Random random = new Random(); for(int i=0;i<9;i++) { salesDetailsList.Add(new SalesDetails(companyNames[i],random.Next(0,10000), random.Next(1,10000),salesStages[i])); } return salesDetailsList; } }

10. Add the following code to Form1’s Load event to populate the grid with data.

    C#	コードのコピー
    SalesDetails salesDetails = new SalesDetails(); List<SalesDetails> salesDetailsList = salesDetails.GetData(); c1FlexGrid1.DataSource = salesDetailsList;

11. Drag and drop a Label control on C1SplitterPanel2 and set the following properties:

    Property Name	Value
    Text	13:1
    Font size	35

    Now, drag and drop another Label control on C1SplitterPanel2 and set the following properties:

    Property Name	Value
    Text	Unqualified Leads turned into customers
    Font size	10

12. Add a FlexPie to C1SplitterPanel3 and set the following properties:
    

    Property Name	Value
    Dock	Fill
    BindingName	CountryName
    Binding	OpportunityCount

13. Set C1SplitterPanel3’s Text property to “Country Sales”
14. Add a class named CountrySales.cs to the project and copy the following code to it to add data for FlexPie.

    C#

    コードのコピー

    public class CountrySales { public CountrySales(string countryName, int opportunityCount) { CountryName = countryName; OpportunityCount = opportunityCount; } public CountrySales() { } public string CountryName { get; set; } public int OpportunityCount { get; set; } public List<CountrySales> GetData() { string[] countryNames = {"Germany", "India", "Japan", "UK" , "US" }; List<CountrySales> countrySalesList = new List<CountrySales>(); Random random = new Random(); for (int i = 0; i < 5; i++) countrySalesList.Add(new CountrySales(countryNames[i],random.Next(0,30))); return countrySalesList; } }

15. Add the following code to Form1’s Load event to populate the pie with data.

    C#	コードのコピー
    CountrySales countrySales = new CountrySales(); List<CountrySales> countrySalesList = countrySales.GetData(); flexPie1.DataSource = countrySalesList;

    
    
    The lead conversion dashboard gets created.