Quick Start

This quick start will guide you through the steps of creating a simple grid application using the FlexGrid control. Follow the steps below to get started:

This section demonstrates how to create a FlexGrid application in .NET Framework by binding it to an external datasource. You can also create a class to supply data to the grid as shown in the .NET 6 tab. Similarly, you can use below steps to bind FlexGrid to a datasource in .NET 6. However, note that some design-time steps may vary in case of .NET 6.

Steps to create first FlexGrid application

Set Up the Application

  1. Create a new Windows Forms app(.NET Framework).
  2. Configure your project and set the Framework property.
  3. Drag and drop the FlexGrid control from the Visual Studio toolbox onto the form.
    Observe: An empty grid is added to the form at design time.

Bind FlexGrid to a Data Source

There are two ways to bind data with the FlexGrid control, either choose to bind at design time or through code at run time.

Binding at Design Time

  1. In the design view, select the FlexGrid control and click smart tag to open the C1FlexGrid Tasks menu.
  2. Click the Choose Data Source drop down button and select Add Project Data Source... option to open the Data Source Configuration Wizard.
  3. On Choose a Data Source Type page, select Database and click Next.
  4. On Choose a Database Model page, select Dataset and click Next.
  5. On Choose Your Data Connection page, click New Connection to open the Add Connection dialog.
  6. Against the DataSource field, click Change... button to open the Change Data Source dialog.
  7. Select Microsoft Access Database File and click OK to return to the Add Connection dialog.
  8. Against the Database file name field, click Browse and navigate to the database file. Provide the User name and Password, if required to connect to the database file. This example uses C1NWind.mdb file located at the following location by default:
    \Documents\ComponentOne Samples\Common
  9. Click Test Connection to make sure that you have successfully connected to the database or server and click OK.
  10. Click OK again to close the Add Connection dialog box.
  11. Click Next 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. Choose the appropriate option as per your requirement.
  12. Save the connection string in the application configuration file by checking the Yes, save the connection as box and entering a name.
  13. Click Next to switch to the Choose Your Database Objects page.
  14. Choose a table, say Products from the Tables node and click Finish.
  15. The above steps add a dataset and connection string to your project. Also, Visual Studio automatically creates the following code to fill the dataset:
    C#
    Copy Code
     // TODO: This line of code loads data into the 'c1NWindDataSet.Products' table. You can move, or remove it, as needed.
     this.productsTableAdapter.Fill(this.c1NWindDataSet.Products);
    
    VB.NET
    Copy Code
     ' TODO: This line of code loads data into the 'c1NWindDataSet.Products' table. You can move, or remove it, as needed.                       
     Me.ProductsTableAdapter.Fill(Me.c1NWindDataSet.Products)
    

Binding at Run Time

To bind the grid through code, first, we need to create a database connection string. Then, use an object of data adapter (in this case, OleDbDataAdapter) to create a query to fetch products from the data table and fill it in the data table which is assigned to the DataSource property of C1FlexGrid class.

C#
Copy Code
// bind grid to a data source
string conn = GetConnectionString();
OleDbDataAdapter da = new OleDbDataAdapter("select * from products", conn);
DataTable dt = new DataTable("Products");
da.Fill(dt);
c1FlexGrid1.DataSource = dt;
VB.NET
Copy Code
' bind grid to a data source
Dim conn As String = GetConnectionString()
Dim da As OleDbDataAdapter = New OleDbDataAdapter("select * from products", conn)
Dim dt As DataTable = New DataTable("Products")
da.Fill(dt)
c1FlexGrid1.DataSource = dt

Note that the above sample code uses a custom method named GetConnectionString to create a connection string with database.

C#
Copy Code
static string GetConnectionString()
{
    string path = Environment.GetFolderPath(Environment.SpecialFolder.Personal) + @"\ComponentOne Samples\Common";
    string conn = @"provider=microsoft.jet.oledb.4.0;data source={0}\c1nwind.mdb;";
    return string.Format(conn, path);
}
VB.NET
Copy Code
Private Shared Function GetConnectionString() As String
    Dim path = Environment.GetFolderPath(Environment.SpecialFolder.Personal) & "\ComponentOne Samples\Common"
    Dim conn = "provider=microsoft.jet.oledb.4.0;data source={0}\c1nwind.mdb;"
    Return String.Format(conn, path)
End Function

Configure the FlexGrid control

This section walks you through the design-time and run-time steps to configure the grid with some basic settings. These settings and features are explained in detail in the topics below.

Configuring Grid at Design Time

  • Click smart tag to open the C1FlexGrid Tasks Menu.
  • Click the Styles option to open C1FlexGrid Styles Editor.
  • Select Fixed from Built-in Styles pane, customize some settings such as Backcolor, Font, and ForeColor and click OK.
  • To fit the grid to the form, click the Dock in Parent Container option.
  • For customizing a column, click the column (say, Unit Price column) to open C1FlexGrid Column Tasks Menu.
  • Click the ellipsis alongside Format field to open the Format String dialog.
  • Select Currency as Format Type and click OK.

Configuring Grid at Run Time

Add following code to configure the grid and its columns at run time.

C#
Copy Code
c1FlexGrid1.Styles.Fixed.ForeColor = Color.Blue;
c1FlexGrid1.Styles.Fixed.Font = new Font("Microsoft Sans serif", 9, FontStyle.Bold);
c1FlexGrid1.Dock = DockStyle.Fill;
c1FlexGrid1.Cols[6].Format = "c";  
VB.NET
Copy Code
c1FlexGrid1.Styles.Fixed.ForeColor = Color.Blue
c1FlexGrid1.Styles.Fixed.Font = New Font("Microsoft Sans serif", 9, FontStyle.Bold)
c1FlexGrid1.Dock = DockStyle.Fill
c1FlexGrid1.Cols(6).Format = "c"
Note: WinForms .NET 6 Edition does not include rich design-time support yet. We will enhance it in future releases.
See Also

Documentation