Asp .net 2.0 GridView control in depth by azamsharp

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
// 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"];

SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories", myConnection);
DataSet ds = new DataSet();
ad.Fill(ds, "Categories");
myGridView.DataSource = ds;
myGridView.DataBind();
SqlConnection myConnection = new SqlConnection(connectionString);string connectionString = myDataSource.ConnectionString;
}

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
myGridView.EditIndex = e.NewEditIndex;
BindData();
}

void myGridView_RowEditing(object sender, GridViewEditEventArgs e)
{

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
myGridView.EditIndex = -1;
BindData();
}

void myGridView_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{

 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
// This will contain the selectedValue of the row
}
string selectedCategory = myGridView.SelectedRow.Cells[1].Text;void myGridView_SelectedIndexChanged(object sender, EventArgs e)
{

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
myGridView.PageIndex = e.NewPageIndex;
BindData();
}

void myGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
{

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