Version

Getting Started with WebDataGrid

Before You Begin

WebDataGrid™ allows many features to be enabled for complex behaviors and dynamic operations. The most common use however, is to display data. Binding and displaying data with WebDataGrid is a simple process.

What You Will Accomplish

You will learn how to add WebDataGrid to your page, retrieving customers table of the Northwind database.

Follow these Steps

  1. Create an ASP.NET web page.

  2. Drag a ScriptManager component from the Microsoft® Visual Studio™ toolbox onto the page.

  3. Drag a WebDataGrid control onto the page.

  4. Drag a SqlDataSource component onto the page.

  5. Click the smart tag of the SqlDataSource component and select Configure Data Source. The Configure Data Source configuration wizard appears.

WebGrid Binding WebGrid To SQL Data Source 01.png
  1. Click New Connection to configure the connection string. The Add Connection dialog appears.

WebGrid Binding WebGrid To SQL Data Source 02.png
  1. Set the server name to the server you are using, .\SQLEXPRESS in this case. Set the database to Northwind.

  2. Click Ok. You are returned to the Configure Connection screen.

  3. Click Next.

  4. Select Specify Columns from a Table or View and do the following:

    1. Choose the Customers table from the drop-down list.

    2. In the Columns section, select CustomerID, CompanyName, ContactName, and ContactTitle to display those columns.

    3. At this point you have the option to click the Advanced button to specify that the SqlDataSource component should generate Insert, Update, and Delete statements for the data retrieved.

  1. Click Next.

  2. Test your query to make sure SqlDataSource retrieves your data.

  3. Click Finish to close the configuration wizard. SqlDataSource is set up to retrieve the Customers data from the Northwind database.

  4. In the properties window for WebDataGrid, set DataSourceID to be the id of the SqlDataSource component.

  5. Set the DataKeyFields property to CustomerID.

  6. Run the application. WebDataGrid binds to the customers table and displays its data.

WebDataGrid Binding WebDataGrid to a SQL Data Source 01.png