ComponentOne GridView for ASP.NET WebForms
Quick Start / Step 1 of 3: Binding C1GridView to a DataSource
In This Topic
    Step 1 of 3: Binding C1GridView to a DataSource
    In This Topic

    In this step you'll begin the quick start by creating a new project and adding the C1GridView control to your project. You'll then bind the C1GridView control to a datasource. Note that in this example, you'll be using the Northwind database, C1Nwind.mdb, installed by default in the ComponentOne Samples\Common folder installed in your Documents folder.

    Complete the following steps to begin:

    1. From the Visual Studio File menu select New Project. The New Project dialog box will appear.
    2. In the New Project dialog box expand a language in the left-hand pane and select Web. In the right pane, choose ASP.NET Empty Web Application, enter a Name for your application, and select OK. A new application will be created.
    3. In the Solution Explorer, right-click the project and choose Add Reference.
    4. In the Add Reference dialog box, locate and select the C1.Web.Wijmo.Controls and C1.Web.Wijmo.Controls.Design assemblies and click OK. The references will be added.
    5. Right-click the project in the Solution Explorer and from the context menu choose Add │ New Item.
    6. In the Add New Item dialog box choose Web Form from the list of templates, name the item "Default.aspx", and click Add. The new page should open.
    7. In the Solution Explorer, right click the project name and choose Add | New Folder. Name the new folder "App_Data".
    8. Navigate to the Visual Studio Toolbox and double-click the C1GridView icon to add the control to your project. Note that in source view, tag for C1GridView control is added within <form> tags.
    9. In the Solution Explorer window, right-click the App_Data folder and select Add Existing Item in the context menu.
    10. In the Add Existing Item dialog box, navigate to where the Northwind database is located, by default in the samples directory, select C1Nwind.mdb, and click Add to close the dialog box and add the file to your project.
    11. Click the C1GridView control's smart tag to open the C1GridView Tasks menu.
    12. Click the Choose Data Source drop-down arrow, and select <New data source>: The Data Source Configuration Wizard will open.
    13. Configure your data source by completing the following steps:

      In Visual Studio 2012:

      1. On the Choose a Data Source Type screen, select Database, leave the default ID entered, and click OK.
      2. On the Choose Your Data Connection screen, click the drop-down arrow and select the C1NWind.mdb database.
      3. Click Next to continue.
      4. Click Next on the next screen to use the default connection string.

      In previous versions of Visual Studio:

      1. On the Choose a Data Source Type screen, select Access Database. Leave the default ID entered, and click OK.
      2. On the Choose a Database screen, click the Browse button to locate a database.
      3. In the Select Microsoft Access Database dialog box, click the App_Data folder in the Project folders list, select the C1Nwind.mdb file in the Contents of folder pane, and click OK. The Nwind.mdb database should now be listed on the Choose a Database screen.
      4. Click Next to continue.
    14. On the Configure the Select Statement screen, confirm that the Specify columns from a table or view radio button is selected, under Name choose Products from the drop-down list, and in the Columns pane choose the asterisk (*) check box to select all the columns. Click Next to continue.
    15. You can test the query on the Test Query page, and select Finish to close the wizard and complete binding the grid. Note that the grid columns now reflect the datasource.

    That's all you need to do to create a simple grid application! The grid is now bound Northwind database. If you run your project now, you'll have a fully-functional grid application where you can interact with data in a tabular form and you'll be able to access and interact with the data from the Products table of the database. In the next steps of this quick start you'll customize the grid's appearance and behavior and explore the grid's run-time interactions.

    See Also