Working with GridView Control in ASP.NET

Introduction

This article demonstrating how to use ASP.NET GridView control and what are new features are available from ASP.NET 1.x to ASP.NET 2.0 Grid Control.Well, you know all powerful data bound control DataGrid in ASP.NET 1.x. Despite its amazing programming interface and versatility, DataGrid has its own shortcomings.

Shortcomings of DataGrid (ASP.NET 1.x)

• DataGrid requires you to write custom code for handling common operations like sorting, paging and manipulation of data in DataGrid
• DataGrid when bound to DataSource control can only support select operation on DataSource. Updating DataSource through DataGrid can be done only through custom ADO.NET code
• DataGrid supports a restricted event model.
• DataGrid does not support adaptive rendering on different platforms

Above limitations apply only to ASP.NET 1.x. ASP.NET 2.0 enhanced DataGrid Control is available which overcomes some of above mentioned shortcomings

In ASP.NET 2.0, Microsoft has introduced GridView control which too displays tabular data in a grid. With GridView control, you can display, edit, and delete data directly from different kinds of data sources with out writing any single piece of code

GridView Control Features

• Enhanced data source binding capabilities (Direct interaction with DataSource with any writing any ADO.NET code)
• Built-in support for sorting and paging functionalities
• Improved Design time features(Smart Panel Tag)
• Customized pager user interface with PagerTemplate property
• Additional Column types(ImageField)
• New Event model with support for pre event and post event operations

Enhanced Data Source binding capabilities

GridView control automates paging, sorting and database operations like updating, deletion and selection of data with out writing single piece of code. This is possible with new property DataSourceID which allows performing paging, sorting and all database operations directly with the DataSource. For example, GridView can directly update, delete and perform paging, sorting with a sqldatasource with out any custom code. On contrary, DataGrid can declaratively bind a DataSource control but it can do it for only displaying data. All other database operations have to be coded manually.

Set DataSourceID for GridView

Improved Design time features (Smart Panel Tag)

GridView control includes support for Smart tag panel that allows setting the design-time properties easily like auto formatting and adding new template columns.

Smart Tag associated with GridView

Customized Pager User Interface

GridView control provides built-in support for paging by using new property called PagerSetting. PagerSetting property supports four modes:

1. Numeric displays numbered links for pages
2. NextPrevious displays only next/previous links to traverse pages
3. NumericFirstlast displays Numbered buttons as well as first/last links
4. NextPreviousFirstlast displays First, Next, Previous, Last combo links

You can also customize the look and feel of each page by setting various properties like PagerStyle property and using PagerTemplate to change look and style of buttons and pages. You can see properties of GridView1 in below listing

PagerSettings property for GridView

New Column Types

GridView provides supports for new columns like checkbox field and ImageField which allows binding Boolean data and image data to new columns.

Event Model

Another striking difference between DataGrid and GridView is in the event model. GridView supports both pre-operation and post-operation events. For example: when ever you update a row RowUpdating is fired before the update and RowUpdated events after the GridView automatically updated a row. This way you can get a chance to inspect the input values just before the event is fired and evaluate the returned results just after the event is fired. Similarly for Delete operation, GridView supports RowDeleting(pre-event) and RowDeleted events(post-event).
Let's consolidate our understanding with an example. We will use SQL Server 2000 database for demonstration purpose.

Drag and drop the sqlDataSource from toolbox to page. When you drop the sqlDataSource onto page you will be prompted to configure Data Source using below Smart Tag. Click configure Data Source.

Configure Data Source wizard appears as below:

Click on New connection to establish new connection with data source.

Choose SQL Server Datasource and click continue button.

Decide whether you would like to go for Windows Authentication or SQL Server authentication. Click test connection button. Once satisfied with connection, click ok button.

Choose Data connection to connect to database and click nex

If you want to save new connection info in configuration file, check the Yes, save this connection checkbox and click next.

Specify the columns which would like to bind to GridView control and click next.

If you are interested to add update/delete functionalities to GridView check the options and click ok.

You can preview the data returned by this new data source by clicking Test Query button. Once you are done, click finish button.
After the configuring SqlDataSource using above mentioned steps, drag and drop the GridView control onto the page. Choose previously configured SqlDataSource from Smart tag as seen below. At the same time enable paging, sorting and selection. Also play around with Auto Format feature to apply various formatting features to GridView and Add Edit button and Update button by Clicking Add New Column

You can enable the built-in edit or delete functionality of the GridView control in any of the following ways:

1. Setting the AutoGenerateEditButton property to true to enable updating and the AutoGenerateDeleteButton property to true to enable deleting.
2. Adding a CommandField with the ShowEditButton property set to true to enable updating and the ShowDeleteButton property set to true to enable deleting.
3. Creating a TemplateField where the ItemTemplate contains command buttons with the CommandName set to "Edit" for updating and "Delete" for deleting.

GridView Smart Tag

Set the AutoGenerateEditButton property to true to enable updating and the AutoGenerateDeleteButton property to true to enable deleting in the properties window Of GridView Control. Below listing shows the properties window. 

GridView Properties

Press CTRL+F5 to load the page into browser and you will see results as shown below.

GridView output listing

 When user clicked Edit link for first row you can observe "select" link disappears and text boxes appear to make changes.

GridView editing

Conclusion

Hence ASP.NET 2.0 GridView control is powerful feature which eliminates the need to write custom code to perform database operation like updating and deleting. It is closely bound with new datasource controls to make this happen. But still, DataGrid is still available in ASP.NET 2.0 with it's own advantages.