In-Depth look at the GridView Control
Introduction:
In the last article we looked at few of the new controls
available in Asp.net 2.0. We also talked about Grid View Control which has
replaced the Asp.net 1.1 DataGrid control for good. In this article we will
examine more features of the Grid View control. In this article we will see some
of the common operations that can be performed using the GridView control. Apart
from these operations there are many more functions that can be performed on the
control and which we will see in the later articles.
Adding a SqlDataSource and binding to GridView Control:
In this article I will be using the Northwind database which
comes with SQL Server 2000. In the last article I explained how easy it is to
bind the Grid View control to the SqlDataSource. You can perform all these
actions using the wizard. If you want to code and bind the datasource you can
easily perform it using the following code sample:
|
void Page_Load(object
sender, EventArgs
e)
{
if (!Page.IsPostBack)
{
// Binds the data
BindData();
}
}
public
void BindData()
{
// you can use this line
string
connectionString = myDataSource.ConnectionString;
// you can also use this line since by
using the SqlDataSource it makes an entry in the
// web.config file if that is what
choose to do
//string connectionString =
(string)ConfigurationSettings.AppSettings["ConnectionString"];
// if you are using Enterprise Library
you can also use
//string connectionString =
(string)ConfigurationSettings.ConnectionStrings["ConnectionString"];
SqlConnection
myConnection = new SqlConnection(connectionString);
SqlDataAdapter
ad = new
SqlDataAdapter("SELECT
* FROM Categories", myConnection);
DataSet ds
= new
DataSet();
ad.Fill(ds, "Categories");
myGridView.DataSource = ds;
myGridView.DataBind();
}
|
You will need to set the Bound column in order to see the text
in the cells of the grid view control. This can be easily done by using the
Smart tag which appears when you right click on the grid view control.
I have also added a Status column to show you the checkbox
column feature. The Status column is a simple bit field whose value can be
either 1 or 0. If you are using Access database you can choose Yes/No Column.
Once you have set up all your columns and execute the page it will display
something like this:
At this moment if you try to select the Checkbox column, meaning
if you try to check or uncheck the Status column it won't work. Let's see how we
can make it work with our grid view control.
In the above image you see that the Checkboxes are not marked.
The reason is because in the database the Checkbox column is NULL. If you make
the column value to either 1 or 0 you will see check marks where the value is 1.
See the image below and you will have a better idea of what I mean.
Editing in the Grid View Control
You can easily add the editing, updating, selecting, paging and
sorting capabilities to your grid view control. Just add a new command column
and you will be asked to add whatever functionality you desire.
If you are using the SqlDataSource to bind to the GridView
control you will get most of the features by just using the SqlDataSource
wizard. Since we are binding the control at runtime we need to add most of the
functionality manually.
Edit Mode:
The fields that are marked readonly = false will change into
TextBoxes when the Row_Editing event triggers. Like DataGrid control its
easy to set the fields in the edit mode.
|
// Editing mode
void
myGridView_RowEditing(object
sender, GridViewEditEventArgs
e)
{
myGridView.EditIndex = e.NewEditIndex;
BindData();
}
|
Cancel Edit:
If you don't like to edit the row you can press cancel link
button which will fire the RowCancelingEdit event. The code to turn the
row back to its original form is quite simple and straight forward.
|
// Cancel Edit Mode
void
myGridView_RowCancelingEdit(object
sender, GridViewCancelEditEventArgs
e)
{
myGridView.EditIndex = -1;
BindData();
}
|
Selecting Row:
Selecting row event is fired when you make a click on the select
link. If you need any particular item in that row you can easily select it using
the cells property:
|
// Selecting row
void
myGridView_SelectedIndexChanged(object
sender, EventArgs
e)
{
// This will contain the selectedValue
of the row
string
selectedCategory = myGridView.SelectedRow.Cells[1].Text;
}
|
The Cells start with index '0' which means Cell[0] is CategoryID
, Cell[1] is CategoryName and so on.
Update Row:
For Updating the row we first need to get the value from the row
that is entered by the user into the TextBox. For this purpose you can change
the bound column into a Template column which will make is easier to locate the
item.
After changing the CategoryName column to a tem plated column we
can easily use the RowUpdating event to find the Text entered by the user.
|
void myGridView_RowUpdating(object
sender, GridViewUpdateEventArgs
e)
{
GridViewRow
row = myGridView.Rows[e.RowIndex];
if (row !=
null)
{
TextBox t
= row.FindControl("TextBox1") as
TextBox;
if (t !=
null)
{
Response.Write("The Text Entered is" +
t.Text);
}
}
|
Paging:
Paging can also be easily enabled in the grid view control. Its just like
DataGrid from Asp.net 1.1. First you need to make set the allow paging property
to true. And you can also set the page size. Here is a small code sample that
will enable paging.
|
// Grid View Paging
void
myGridView_PageIndexChanging(object
sender, GridViewPageEventArgs
e)
{
myGridView.PageIndex = e.NewPageIndex;
BindData();
}
|
Here is a small image shown below of paging. I have limited the page size to
3 so that the distribution of page will take place. In the image below we are in
the page number 2.
Using SqlDataSource to execute commands:
You can also use the powerful SqlDataSource control to run and make your
query. The SqlDataSource also contains the QUERY builder interface which can
enhance the user experience in making SQL Queries. Apart from the SELECT query
there are also INSERT, DELETE and UPDATE query builders wizards that you can use
in your application.
When you use SqlDataSource you gets the advantage of having the paging,
sorting implemented automatically which is pretty cool in some cases.
In the next article we will see some more features of the Grid View control.
I hope you liked the article
Happy Programming !
Attachments:
Project Files: GridViewinDepth.zip