Get Started with FlexGrid for WinForms

This page shows you how to use the basic C1FlexGrid functionality to create a simple grid application. This is not meant to be a comprehensive tutorial on all features of C1FlexGrid, but rather provide a quick start and highlight some general approaches to using the product. For more in-depth tutorials, see the FlexGrid documentation. Please note this quick start uses Visual Studio 2010 and steps may vary in other versions of VS.

Add the FlexGrid Control to Your Windows Forms Application

When you install C1FlexGrid, the C1FlexGrid and C1FlexGridClassic components will not appear in the Visual Studio Toolbox customization dialog box. To manually add the C1FlexGrid control to the Visual Studio Toolbox:

1. Open the Visual Studio IDE (Microsoft Development Environment). Make sure the Toolbox is visible (select Toolbox in the View menu if necessary) and right-click it to open the context menu.
2. Right-click the tab where the component is to appear and select Choose Items from the context menu. The Choose Toolbox Items dialog box opens.
3. In the dialog box, select the .NET Framework Components tab. Sort the list by Namespace (click the Namespace column header) and check the check boxes for all components belonging to namespace C1.Win.C1FlexGrid. Note that there may be more than one component for each namespace.
   
4. From the Visual Studio Toolbox double-click the control or drag it onto your form. This adds the C1FlexGrid control to your form.

Bind C1FlexGrid to a Data Source

FlexGrid supports binding to IEnumerable, DataTable objects. To bind the grid, set the DataSource property. To do this, complete the steps below:

1. Right-click the C1FlexGrid control and select Properties. From the Properties list, locate the DataSource property.
   
2. From the DataSource drop-down list, select Add Project Data Source. The Data Source Configuration Wizard appears.
3. Leave the default setting, Database, selected on the Choose a Data Source Type page, and click Next.
4. Click the New Connection button to create a new connection or choose one from the drop-down list. The Add Connection dialog box appears.
5. Select Microsoft Access Database File, and click Browse to locate the NWind.mdb database in the C:\Documents and Settings\\My Documents\ComponentOne Samples\Common (Windows XP) or C:\Users\\Documents\ComponentOne Samples\Common (Vista) directory. Select the NWind.mdb file and click Open.
6. In the Add Connection dialog box, click the Test Connection button to make sure that you have successfully connected to the database or server and click OK.
7. Click OK again to close the Add Connection dialog box.
8. Click the Next button to continue. A dialog box will appear 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. Save the connection string in the application configuration file by checking the Yes, save the connection as box and entering a name. Click the Next button to continue.
10. On the Choose Your Database Objects page, expand the Tables node, select the Products table and include all of the fields. Enter ProductsDS in the DataSet name box and click Finish to exit the wizard.
    
11. A DataSet and connection string are added to your project. Additionally, Visual Studio automatically creates the following code to fill the DataSet:
    
    

    Visual Basic

    PrivateSub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) HandlesMyBase.Load
   Me.ProductsTableAdapter.Fill(Me.ProductsDS.Products)
EndSub

    C#

    private void Form1_Load(object sender, EventArgs e)
{
   this.productsTableAdapter.Fill_
(this.productsDS.Products);
}

Unbound Data

For unbound scenarios, set the number of Rows and columns in the grid using the Rows.Count and Cols.Count properties. For example, here we create a grid with 50 rows and 10 columns:

You can populate a grid cell using 0-based row and column indexing such as C1FlexGrid1[rowIndex, colIndex] = Value. Use the same notation to retrieve a value from any cell. For example, here we fill an unbound C1FlexGrid with all zeros:

Customize the Grid Settings

The following steps walk you through merging cells, creating subtotals, and printing the grid.

Merging Cells

The C1FlexGrid control allows you to merge cells, making them span multiple rows or columns. This capability can be used to enhance the appearance and clarity of the data displayed on the grid. To enable cell merging, you must do two things:

1. Set the grid's AllowMerging property to a value other than None.
2. If you want to merge columns, set the AllowMerging property to True for each column that you would like to merge. If you want to merge rows, set the AllowMerging property to True for each row that you would like to merge.

Creating Subtotals

The C1FlexGrid.Subtotal method adds subtotal rows that contain aggregate data for the regular (non-subtotal) rows. Subtotal supports hierarchical aggregates. For example, if your grid contains sales data, you may Subtotal to get aggregate sales figures by Product, Region, and Salesperson. The code below illustrates this:

Printing the Grid

To print the contents of the grid, use the PrintGrid method. The method has parameters that allow you to select the scaling mode, whether to display print/preview dialog boxes, set headers and footers, and so on. The PrintParameters property exposes additional printing properties such as the font to use for headers and footers, and a .NET Framework PrintDocument object that can be used to select the printer, paper size and orientation, margins, and so on.

The following code uses the PrintParameters property to set up the page orientation, margins, header and footer fonts. Then it calls the PrintGrid method to display a print preview dialog window: