Search This Blog

Sunday, February 13, 2011

gridview in asp.net

The ASP.NET GridView control is the successor to the v1.x DataGrid, adding the ability to take advantage of specific capabilities of ASP.NET data source controls. Whereas the v1.x DataGrid required a page developer to write custom code to handle simple operations such as paging, sorting, editing or deleting data, the GridView control can automatically handle these operations provided its bound data source control supports these capabilities. The GridView also offers some functionality improvements over the DataGrid, such as the ability to define multiple primary key fields, and some UI customization improvements, such as new field types and templating options. It also exposes a new model for page developers to handle or cancel events.

One of the key advantages of the GridView control over other data-bound controls is its ability to automatically take advantage of data source capabilities. Instead of relying on page code to manually sort or page data, the GridView control can perform these operations automatically as long as the data source is configured to support these operationsFollowing are some important properties that are very useful.
Behavior Properties of the GridView Control
AllowPaging true/false. Indicate whether the control should support paging.
AllowSorting true/false. Indicate whether the control should support sorting.
SortExpression Gets the current sort expression (field name) that determines the order of the row.
SortDirection Gets the sorting direction of the column sorted currently (Ascending/Descending).
DataSource Gets or sets the data source object that contains the data to populate the control.
DataSourceID Indicate the bound data source control to use (Generally used when we are using SqlDataSource or AccessDataSource to bind the data, See 1st Grid example).
AutoGenerateEditButton true/false. Indicates whether a separate column should be added to edit the record.
AutoGenerateDeleteButton true/false. Indicates whether a separate column should be added to delete the record.
AutoGenerateSelectButton true/false. Indicate whether a separate column should be added to selecat a particular record.
AutoGenerateColumns true/false. Indicate whether columns are automatically created for each field of the data source. The default is true.
Style Properties of the GridView Control
AlternatingRowStyle Defines the style properties for every alternate row in the GridView.
EditRowStyle Defines the style properties for the row in EditView (When you click Edit button for a row, the row will appear in this style).
RowStyle Defines the style properties of the rows of the GridView.
PagerStyle Defines the style properties of Pager of the GridView. (If AllowPaging=true, the page number row appears in this style)
EmptyDataRowStyle Defines the style properties of the empty row, which appears if there is no records in the data source.
HeaderStyle Defines the style properties of the header of the GridView. (The column header appears in this style.)
FooterStyle Defines the style properties of the footer of GridView.
Appearance Properties of the GridView Control
CellPadding Indicates the space in pixel between the cells and the border of the GridView.
CellSpacing Indicates the space in pixel between cells.
GridLines Both/Horizontal/Vertical/None. Indicates whether GrdiLines should appear or not, if yes Horizontal, Vertical or Both.
HorizontalAlign Indicates the horizontal align of the GridView.
EmptyDataText Indicates the text to appear when there is no record in the data source.
ShowFooter Indicates whether the footer should appear or not.
ShowHeader Indicates whether the header should appear or not. (The column name of the GridView)
BackImageUrl Indicates the location of the image that should display as a background of the GridView.
Caption Gets or sets the caption of the GridView.
CaptionAlign left/center/right. Gets or sets the horizontal position of the GridView caption.
State Properties of GridView Control
Columns Gets the collection of objects that represent the columns in the GridView.
EditIndex Gets or sets the 0-based index that identifies the row currently to be edited.
FooterRow Returns a GridViewRow object that represents the footer of the GridView.
HeaderRow Returns a GridViewRow object that represents the header of the GridView.
PageCount Gets the number of the pages required to display the reocrds of the data source.
PageIndex Gets or sets the 0-based page index.
PageIndex Gets or sets the number of records to display in one page of GridView.
Rows Gets a collection of GridViewRow objects that represents the currently displayed rows in the GridView.
DataKeyNames Gets an array that contains the names of the primary key field of the currently displayed rows in the GridView.
DataKeys Gets a collection of DataKey objects that represent the value of the primary key fields set in DataKeyNames property of the GridView.
Events associated with GridView Control
PageIndexChanging, PageIndexChanged Both events occur when the page link is clicked. They fire before and after GridView handles the paging operation respectively.
RowCancelingEdit Fires when Cancel button is clicked in Edit mode of GridView.
RowCommand Fires when a button is clicked on any row of GridView.
RowCreated Fires when a new row is created in GridView.
RowDataBound Fires when row is bound to the data in GridView.
RowDeleting,RowDeleted Both events fires when Delete button of a row is clicked. They fire before and after GridView handles deleting operaton of the row respectively.
RowEditing Fires when a Edit button of a row is clicked but before the GridView hanldes the Edit operation.
RowUpdating, RowUpdated Both events fire when a update button of a row is clicked. They fire before and after GridView control update operation respectively.
Sorting, Sorted Both events fire when column header link is clicked. They fire before and after the GridView handler the Sort operation respectively.

You cannot insert data into the database using the GridView control. However, you can do so by using the DetailsView and FormsView controls which ship with ASP.NET 2.0. I will discuss these controls in a forthcoming article. You should also note that the GridView control in ASP.NET 2.0 is a replacement to the popular DataGrid control in ASP.NET 1.1. 

  • The GridView control is associated with the DataSource control through its DataSourceID property.
  • In ASP.NET 2.0 there are several DataSource controls that are designed to work with different data sources.
  • Enabling Editing and Deleting records in the GridView Control is as simple as setting the properties “AutoGenerateDeleteButton” and “AutoGenerateEditButton” as "True"
  • GridView totally supports 6 field types, they are:
1. BoundField,

2. CheckBoxField,

3. ButtonField,

4. CommandField,

5. HyperlinkField,

6. ImageField and

7. TemplateField

Creating a GridView control on a Page

1. Create a Web site

2. Open the Default.aspx page in design view and drag a GridView control onto it.


3 For fetching records from a data source we need to add a SqlDataSource Control to the website. Click on the arrow and select

4. Click Ok. The Configuration Data Source wizard appears.


5. Click on New connection or select the connection for the application from the drop down list.

6. Next specify the columns that are to be bound to the GridView from the table.

1 comment: