4.5. Display Interactive Tables Without Writing Code
The ASP.NET 1.0 and 1.1 DataGrid control was tremendously popular, but implementing some of its most desirable features often required writing a lot of boilerplate code. For example, if you wanted to let users page through rows of data, it was up you to query the database after every postback, retrieve the requested page, and set the range of rows that you wanted to display. With the new GridView control, these headaches are a thing of the past.
Note: The new GridView control lets you create and display tables of data that users can sort, page through, and edit without requiring you to write a single line of code.
In preparing for ASP.NET 2.0, Microsoft architects chose not to release a new version of the current DataGrid in order to simplify backward compatibility. Instead, the new GridView control duplicates and extends the functionality of the DataGrid, while making its features available to developers through a much simpler programming model.
4.5.1. How do I do that?
To use the new GridView control, drag it from the Data section of the Visual Studio toolbox onto the design surface of a web page. For hassle-free data binding, you can add a SqlDataSource control (described in the lab "Bind to Data Without Writing Code") or use an ObjectDataSource control in conjunction with a custom data access object, as explained in "Bind Web Controls to a Custom Class." In this case, we'll use a SqlDataSource control and the select query shown here to retrieve all fields and records in the Customers table of the Northwind database. Here's the final data source tag:
<asp:SqlDataSource Runat="server" SelectCommand="SELECT * FROM Customers" ConnectionString= "Data Source=127.0.0.1;Integrated Security=SSPI;Initial Catalog=Northwind"> </asp:SqlDataSource>
Now, set the GridView.DataSourceID property to the name of the SqlDataSource (in this example, CustomersList). This binds the GridView to the SqlDataSource.
At this point, you can run your page and see a simple HTML table with a full list of customers. However, to make your table look respectable, there are a number of additional steps you'll want to take. These include:
Note: You should be able to see the columns of your grid at design time. If you don't, choose Refresh Schema on the SqlDataSource smart tag (to get the column information from the database) and then choose Refresh Schema on the GridView smart tag.
Making the GridView look respectable is only part of the work. You can also switch on various GridView features using options in the GridView smart tag. Here are some links you can click to get quick results:
Figure 4-6 shows a table that supports paging and sorting by column, which was generated by GridView without using a single line of custom code.
Figure 4-6. A GridView with sorting and paging enabled
4.5.2. What about...
...fine-tuning the GridView display? For example, you might want to tweak the sort order, the text used for the selection and editing links, the column titles, or the order of columns. You might also need to set default text and format strings. To perform any of these tasks, you simply customize the column objects that the GridView generates based on the format of the data source records. The easiest way to do so is to select Edit Columns link on the GridView smart tag and use the Fields dialog to customize the properties of each column. Try it.