PRB: DataGrid Shows Default Column Header Names in Design Mode

When you use the DataGrid control at design time, the column header names default to "Column1," "Column2," and so on. This occurs even though the code-behind window contains code that connects the DataGrid to data that has known column header names.

NOTE: Design time refers to viewing the Web Form designer window in the Microsoft Visual Studio .NET integrated development environment (IDE). Run time refers to viewing the page in a browser.

The DataGrid control does not parse the code in the code-behind window at design time. The custom column header names appear only if the DataGrid properties are set to connect to a data source.

This behavior is by design.

Steps to Reproduce the Behavior

You can view a DataGrid control in a Web Form designer window at design time. The DataGrid displays default columns unless you set the properties of the DataGrid properties to connect to a data source. This design-time behavior differs from the run-time behavior. At run time, the code-behind is run, and the DataGrid shows the results of the code execution.

The following steps use Microsoft Visual Basic .NET and the Microsoft SQL Server pubs sample database. These steps also apply to other languages that use the DataGrid control in an ASP.NET application.

1. Create a new ASP.NET Web Application project in Visual Basic .NET. Web Form1 is created by default.
2. Drag a DataGrid control from the Web Form section of the toolbox onto WebForm1.
   
   NOTE: The columns are named "Column0," "Column1," and "Column2" by default.
3. Drag a SqlDataAdapter control from the Data section of the toolbox onto WebForm1. A series of dialog boxes prompt you to configure the DataAdapter settings.
   1. Initially, you are prompted to select a connection. Verify that the drop-down list includes a connection for the pubs database. If no connection for the pubs database exists, click New Connection, and then click Next.
   2. In the Choose a Query Type dialog box, click Use SQL Statements, and then click Next.
   3. In the Generate SQL Statements dialog box, type a SQL statement, such as select * from authors. You can also click Advanced Options, and then clear the Generate Insert, Update and Delete Statements check box because this demonstration does not use these functions.
   4. Click Finish. A DataAdapter button and a Connection button appear at the bottom of the WebForm1 designer window. By default, the DataAdapter control is named SqlDataAdapter1, and the Connection is named SqlConnection1.
4. Right-click DataAdapter, and then click Generate Dataset. In the dialog box, click OK. By default, the DataSet object is named DataSet11.
5. In the WebForm1 designer window, click DataGrid1. Press F4 to view the properties of DataGrid1.
6. In the DataSource property, click DataSet11 from the list.NOTE: The DataGrid displays all columns from the Authors table. Column headers are filled in with the names of the columns.
   
   
7. Clear the DataSource property.NOTE: The DataGrid displays the default columns, which are labeled "Column0," "Column1," and "Column2."
   
   
8. Open the code-behind window for WebForm1. In the Solution Explorer window, right-click WebForm1, and then click View Code.
9. Copy the following code, and paste the code into the Page_Load event:

   Dim ds As New DataSet()
   SqlDataAdapter1.Fill(ds)
   DataGrid1.DataSource = ds
   DataGrid1.DataBind()
   						

   To find the Page_Load event, click WebForm1 in the Class Name list, and then click Page_Load in the Method Name list.
   
   To edit the code, compare the names of the grid and the adapter on your page to the names in the code. Change the names in the code as necessary.
10. Return to the Designer view for WebForm1.
11. Verify that the DataSource property of the DataGrid control is cleared.NOTE: The DataGrid displays the default columns, which are labeled "Column0," "Column1," and "Column2."

The preceding steps demonstrate design-time behavior. You must set the DataSource property of the DataGrid control by setting the properties or by modifying the code. You can then see the data from the table by viewing the page in a browser.

For more information about the DataGrid control, refer to the following .NET Framework Software Development Kit (SDK) documentation: