Data Bound Controls in ASP.Net - Part 3 (Grid View control)
The
GridView control allows for tabular data display and editing using a
declarative approach. GridView is the successor to the DataGrid control. The
following features are available in the GridView control.
·
Binding to data source
controls, such as SqlDataSource.
·
Built-in updating,
deleting and sorting capabilities.
·
Built-in paging and row
selection capabilities.
·
Programmatic access to
the GridView object model to dynamically set properties, handle events, and so
on.
·
Multiple key fields.
·
Multiple data fields
for the hyperlink columns.
·
Customizable
appearance through themes and styles.
Each column
in the GridView control is represented by a DataControlField object. By
default, the AutoGenerateColumns property is set to true, which creates an AutoGeneratedField object for
each field in the data source. Each field is then rendered as a column in the
GridView control in the order that each field appears in the data source.
You can
also manually control which column fields appear in the GridView control
by setting theAutoGenerateColumns property
to false and
then defining your own column field collection. Different column field types
determine the behavior of the columns in the control.
The
following table lists the different column field types that can be used.
Column field type
|
Description
|
BoundField
|
Displays the value
of a field in a data source. This is
the default column type of the GridView control.
|
ButtonField
|
Displays a command
button for each item in the GridView control. This allows you to create a
column of custom button controls, such as the Add or the Remove button.
|
CheckBoxField
|
Displays a check box
for each item in the GridView control. This column field type is commonly
used to display fields with a Boolean value.
|
CommandField
|
Displays predefined
command buttons to perform selecting, editing, or deleting operations.
|
HyperLinkField
|
Displays the value
of a field in a data source as a hyperlink. This column field type allows you
to bind a second field to the hyperlink's URL.
|
ImageField
|
Displays an image
for each item in the GridView control.
|
TemplateField
|
Displays
user-defined content for each item in the GridView control according to a
specified template. This column field type allows you to create a custom
column field.
|
To define a column field collection declaratively, first add
opening and closing <Columns> tags between the opening and closing
tags of the GridView control.
<asp:GridView ID="gvObj" runat="server"
Width="100%"
>
<Columns>
</Columns>
</asp:GridView>
Next, list the column fields that you want to include between
the opening and closing <Columns> tags. The columns specified are added
to the Columns collection in the order listed. The Columns collection stores all the column
fields in the control and allows you to programmatically manage the column
fields in the GridView control.
Explicitly
declared column fields can be displayed in combination with automatically
generated column fields. When both are used, explicitly declared column fields
are rendered first, followed by the automatically generated column fields.
<asp:GridView ID="GridView1"
runat="server"
Width="100%"
AutoGenerateColumns="true">
<Columns>
<asp:BoundField DataField ="MyField1" HeaderText="Col-1" HeaderStyle-CssClass="cssGridHeader" ItemStyle-CssClass="cssGrid" FooterStyle-CssClass="cssGridFooter" />
<asp:BoundField DataField ="MyField2" HeaderText="Col-2" HeaderStyle-CssClass="cssGridHeader" ItemStyle-CssClass="cssGrid" FooterStyle-CssClass="cssGridFooter" />
</Columns>
</asp:GridView>
The GridView control can be bound to a data source control (such
as SqlDataSource, ObjectDataSource, etc.), as well as any data source that
implements the System.Collections.IEnumerable interface (such as
System.Data.DataView, System.Collections.ArrayList, or
System.Collections.Hashtable).
Use one of the following methods to bind the GridView control to
the appropriate data source type:
·
To bind to a data
source control, set the DataSourceID property of the GridView control to the ID
value of the data source control. The GridView control automatically binds to
the specified data source control and can take advantage of the data source
control's capabilities to perform sorting, updating, deleting, and paging
functionality. This is the preferred method to bind to data.
<asp:GridView ID="cgvObject" runat="server"
Width="100%"
DataSourceID="MySqlSource1" >
·
To bind to a data
source that implements the System.Collections.IEnumerable interface,
programmatically set the DataSource property of the GridView control to the
data source and then call the DataBind method. When using this method, the
GridView control does not provide built-in sorting, updating, deleting, and
paging functionality. You need to provide this functionality yourself.
this.gvObj.DataSource = oDataTable;
this.gvObj.DataBind();
The
automatic updating, deleting, and selection functionalities are enabled when a
button in a ButtonField orTemplateField column
field, with a command name of "Edit", "Delete", and
"Select", respectively, is clicked. The GridView control can
automatically add a CommandField column
field with an Edit, Delete, or Select button if the AutoGenerateEditButton,
AutoGenerateDeleteButton, or AutoGenerateSelectButton property is set to true, respectively.
<asp:GridView ID="gvObj" runat="server"
Width="100%"
AutoGenerateColumns="false"
AutoGenerateEditButton="true"
AutoGenerateDeleteButton="true"
AllowPaging="true"
>
<Columns>
<asp:TemplateField>
<HeaderTemplate>
MyColumnHeader
</HeaderTemplate>
<ItemTemplate>
<a href="#">My Column Data</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Instead of
displaying all the records in the data source at the same time, the GridView
control can automatically break the records up into pages. To enable paging,
set the AllowPaging property to true.
Inserting
records into the data source is not directly supported by the GridView control.
However, it is possible to insert records by using the GridView control in
conjunction with the DetailsView or FormView control.
You can customize the
appearance of the GridView control by setting the style properties for the
different parts of the control. The following table lists the different style
properties.
Style property
|
Description
|
AlternatingRowStyle
|
The style settings
for the alternating data rows in the GridView control. When this property is
set, the data rows are displayed alternating between the RowStyle settings
and the AlternatingRowStyle settings.
|
EditRowStyle
|
The style settings
for the row being edited in the GridView control.
|
EmptyDataRowStyle
|
The style settings
for the empty data row displayed in the GridView control when the data source
does not contain any records.
|
FooterStyle
|
The style settings for
the footer row of the GridView control.
|
HeaderStyle
|
The style settings
for the header row of the GridView control.
|
PagerStyle
|
The style settings
for the pager row of the GridView control.
|
RowStyle
|
The style settings
for the data rows in the GridView control. When theAlternatingRowStyle property is also set, the data rows are
displayed alternating between the RowStyle settings and the AlternatingRowStyle settings.
|
SelectedRowStyle
|
The style settings
for the selected row in the GridView control.
|
<asp:GridView ID="gvObj" runat="server"
Width="100%"
>
<Columns>
<asp:TemplateField>
<HeaderStyle CssClass="cssGridHeader"></HeaderStyle>
<HeaderTemplate>
MyColumnHeader
</HeaderTemplate>
<ItemStyle
CssClass="cssGrid"
Width="30px"></ItemStyle>
<ItemTemplate>
<a href="#">My Column Data</a>
</ItemTemplate>
<FooterStyle
CssClass="cssGridFooter"></FooterStyle>
</asp:TemplateField>
</Columns>
</asp:GridView>
You can also show or
hide different parts of the control. The following table lists the properties
that control which parts are shown or hidden.
Property
|
Description
|
ShowFooter
|
Shows or hides the
footer section of the GridView control.
|
ShowHeader
|
Shows or hides the
header section of the GridView control.
|
Events
The
GridView control provides several events that you can program against. This
allows you to run a custom routine whenever an event occurs. The following
table lists the events supported by the GridView control.
Event
|
Description
|
PageIndexChanged
|
Occurs when one of the
pager buttons is clicked, but after the GridView control handles the paging
operation. This event is commonly used when you need to perform a task after
the user navigates to a different page in the control.
|
PageIndexChanging
|
Occurs when one of the
pager buttons is clicked, but before the GridView control handles the paging
operation. This event is often used to cancel the paging operation.
|
RowCancelingEdit
|
Occurs when a row's Cancel
button is clicked, but before the GridView control exits edit mode. This
event is often used to stop the canceling operation.
|
RowCommand
|
Occurs when a button is
clicked in the GridView control. This event is often used to perform a task
when a button is clicked in the control.
|
RowCreated
|
Occurs when a new row is
created in the GridView control. This event is often used to modify the
contents of a row when the row is created.
|
RowDataBound
|
Occurs when a data row is
bound to data in the GridView control. This event is often used to modify the
contents of a row when the row is bound to data.
|
RowDeleted
|
Occurs when a row's Delete
button is clicked, but after the GridView control deletes the record from the
data source. This event is often used to check the results of the delete
operation.
|
RowDeleting
|
Occurs when a row's Delete
button is clicked, but before the GridView control deletes the record from
the data source. This event is often used to cancel the deleting operation.
|
RowEditing
|
Occurs when a row's Edit
button is clicked, but before the GridView control enters edit mode. This
event is often used to cancel the editing operation.
|
RowUpdated
|
Occurs when a row's Update
button is clicked, but after the GridView control updates the row. This event
is often used to check the results of the update operation.
|
RowUpdating
|
Occurs when a row's Update
button is clicked, but before the GridView control updates the row. This
event is often used to cancel the updating operation.
|
SelectedIndexChanged
|
Occurs when a row's Select
button is clicked, but after the GridView control handles the select
operation. This event is often used to perform a task after a row is selected
in the control.
|
SelectedIndexChanging
|
Occurs when a row's Select
button is clicked, but before the GridView control handles the select
operation. This event is often used to cancel the selection operation.
|
Sorted
|
Occurs when the hyperlink
to sort a column is clicked, but after the GridView control handles the sort
operation. This event is commonly used to perform a task after the user
clicks on a hyperlink to sort a column.
|
Sorting
|
Occurs when the hyperlink
to sort a column is clicked, but before the GridView control handles the sort
operation. This event is often used to cancel the sorting operation or to
perform a custom sorting routine.
|
Comments
Post a Comment