Before You Begin:

One common use of WebGrid controls is the display of data retrieved from a database. This example shows how to retrieve flat (as opposed to hierarchical) data and display it in the grid.

Retrieve a DataTable from the data source. Bind this DataTable to the WebGrid by first setting the DataSource property of the grid to the DataTable and then calling the DataBind method of the grid to place the columns and rows into the HTML output.

The Northwind database is used as a source for the flat data. This tutorial was tested using SQL Server 2000, however any source capable of connecting to a Northwind database should be suitable.

The issue is the creation of a database connection string. After a connection string is created the remainder of the project is quite straightforward.

To allow the developer to connect to various data sources, the project uses OleDb as opposed to SQLClient for data access.

Follow These Steps:

This project performs the following steps:

1. Select the WebGrid control in your toolbox and draw the control on the form.
2. You should note at this point that references to Infragistics.Shared and Infragistics.WebUI.UltraWebGrid have been added to the Solution Explorer window under the "References" section.
3. Click the Data tab in the toolbox. Select the OleDbConnection tool and double-click it or drag it onto the form. This is a non-visual control, so it will appear in the component tray immediately under the form.
4. Click on the OleDbConnection control in the form's component tray and select the ConnectionString property in the property sheet. A dropdown list appears that contains the existing data connections, if any. At the bottom of the list is a "New Connection..." option.
5. Select "New Connection..." The first screen of the Connection Wizard will appear.
6. Click the Provider tab and select the "MS Jet 4.0 OLEDB Provider" option from the list. Click the "Next" button. The Connection tab will become active.
7. On the Connection tab, you are prompted to select or enter a database name. Click the ellipsis (...) button to the right of the text box to browse for the database that you will use. Choose the sample database that ships with the NetAdvantage for .NET SDK. The database (Nwind.mdb) is located in the following folder, depending on your operating system:
   • XP -- C:\Documents and Settings\All Users\Documents\Infragistics\NetAdvantage for .NET 2007 Vol. 2 CLR 2.0\Samples\ASP.NET\App_Data
   • Vista -- C:\Users\Public\Documents\Infragistics\NetAdvantage for .NET 2007 Vol. 2 CLR 2.0\Samples\ASP.NET\App_Data

   When you have selected the file, click "Open" and the filename will appear on the Connection tab.

8. Click the "Test Connection" button to verify the connection. Once you see a message indicating that the connection was successful, you can click OK to complete the connection setup.
9. Select OleDbDataAdapter control from your toolbox and double-click it or drag it onto your form. The Data Adapter Configuration Wizard will automatically appear. The first screen of this wizard is a welcome screen; read the text then hit Next to go on to the next step of the wizard.
10. On the second screen of the wizard, you are shown a list of the available database connections and prompted for the database connection to use. Select the one you just created; it will begin with "ACCESS." and include the full path to the database, plus table and login information. So if you have installed UltraWebGrid to a default location, the choice will look something like "ACCESS.C:\Documents and Settings\All Users\Documents\Infragistics\NetAdvantage for .NET 2007 Vol. 2 CLR 2.0\Samples\ASP.NET\App_Data\NWind.mdb.Admin".
    

    When you have selected the connection, click the "Next" button.

11. On the next screen of the wizard, you are prompted to choose a query type. Choose "Use SQL statements".
    

    Click the "Next button to go to the next screen.

12. The following screen prompts you for the SQL statements to generate. You can enter SQL directly into the "What data should the data adapter load into the dataset?" text box. Type "SELECT * FROM Customers" into the text box.
    

    Click the "Next" button when you are done.

13. View the wizard results. All items should be checked on this screen.
    

    When you have verified the wizard settings, click "Finish". The OleDbDataAdapter control will then appear in the form's component tray.

14. Select the OleDbDataAdapter control you created from the form's component tray, go to the property sheet and click the link at the bottom which says "Generate Dataset..." The Generate Dataset screen appears.
15. On the Generate DataSet screen, the top section offers you a "Choose DataSet" option. You should select the "New" option. A default name (DataSet1) is provided. The bottom section of the screen offers a "Choose which table(s) to add to the dataset:" list. You should see the Customers table listed.
16. Switch back to the form containing the WebGrid. Click on the control to select it, then select the DataSource property. A drop-down list displays the available options; choose the one that says "DataSet1". Then set the DataMember property to Customers.
17. In the Load event of Form1 enter the following code to fill the Dataset with data from the database and connect the WebGrid to the dataset:

    In Visual Basic:

    Me.OleDbDataAdapter1.Fill(Me.DataSet1.Customers)
    Me.UltraWebGrid1.DataBind()
    
                

    In C#:

    this.oleDbDataAdapter1.Fill(this.dataSet1.Customers);
    this.UltraWebGrid1.DataBind();
    
                

18. Click Run. The project will execute, and you will see the WebGrid on the form filled data from the Customers table.

What You Accomplished:

This walk-through provides step-by-step instructions on how to retrieve data from a data source and bind that data to WebGrid.

UltraWebGrid namespace

E-mail your feedback on this topic. Opinion about our help? Take our survey. Copyright © 1996-2007 Infragistics, Inc. All rights reserved.

Build Version: 7.2.20072.1063