Grid View Control in Asp.net 2.0

 

Introduction:

We all enjoyed the datalist and the datagrid controls in Asp.net 1.1. There were thousands of operations that we can perform using datagrid and datalist control. Asp.net 2.0 ships with another data bound templated control which is called Grid View. Grid View has made everything easier for developers. The main changes that I have seen in Asp.net 2.0 is that we don't require a lot of code to achieve tasks but most of the functionality is already provided and built in the control.

In this article we will see the GridView control in action and we will see what type of operations we can perform using this control and how this control is better than the classic datagrid control.

Using the GridView Control:

 If you read my previous articles on DataGrid control you might have noticed that we need to write quite a bit of code to enable paging, sorting and selecting an item from the datagrid. Using the gridview control I did not even write a single line and got all the three things i.e, paging, sorting and selection for granted.

Here is how I did it in less than 2 minutes: (Sample1.aspx)

1) Drag a SqlDataSource control on the form and configure it using the wizard.

2) Once you got the SqlDataSource control set up you are ready to drag the grid on the form.

3) Simply drag the gridview control on the form and set its data source to the SqlDataSource Object.

Now in the Small menu on the right hand side you can see that I have set the datasource to the myDataSource where myDataSource is simply the SqlDataSource. I hope you can see the Enable paging, Enable sorting and Enable selection checkboxes. If you like you can check them all and that's it you will get a grid with all the three functionalities cool right ?

Now if you run the page you will see something like this depending on which table you have used to populate the SqlDataSource control.

As, you might have already guessed that I am using Northwind database since this database is installed on most of the computers.

Let's use the Categories table and display its data. As you already know that Categories table have the Picture field of image type which is the image of the category. Let's see that how easy it is to display the image.

Sample2.aspx

First make a SqlDataSource if you have not already done so. Then assign the datasource to the GridView control. Now click on the Grid View and select "show smart tag". You will see something like this:

As you can see there is the option in the smart menu to add a new Column. Click on it and you will see a screen which looks something like this:

As I did above select the ImageField and in the datafiend select Picture. You can also have the Url of the image. Once you are done with this your gridview will appear with the picture/image

Isn't this cool we did not even have to write a single line of code yet. You can also display checkboxes instead of the pictures but for the checkboxes the column in the database must have to be a bit field or some column with Boolean values.  

Let's see how we can add a boolean column. In order to do that I need to add a new column in the Northwind database which is of type boolean. So we have now added a new column in the Northwind which is called Status and it takes a bit value which can either be 1 or 0 or in other words which can be true or false.

Next we right click on the grid view control and select the smart tag and added a new column on the type checkbox and set its Data Field to status field in the database and that's it. Now our grid view control will have some checkboxes added which we can select or deselect.

See how cool is this and we did not even have to write a single line of code. Let's see some more cool stuff we can do using the grid view.

Okay you see the paging is done in kind of a old fashioned way which is displaying the page numbers. How about we change the page numbers to some cool image and we can click the image to go back and forth. In order to do that you can just simply use the pagersettings property to set the NextPageImageUrl and PreviousPageImageUrl properties to the image that you wish to appear on the next and the previous link.

There is another cool feature that I want to mention here. Suppose you have many records in the database and you execute a query and some of the records in the database are blank meaning that there is nothing inside them but just merely NULL values. When you bind those to the grid view control as expected you will get some blank rows on the page which really looks ugly. Grid view exposes a property named EmptyDataText which can be used to fill the rows with the text which are empty and hence return nothing. This will only work and the text will only be shown if EmptyDataTemplate is not defined.

I don't know if you have noticed or not but did you wonder that where are the edit,update and cancel buttons which were used for in-place editing feature. Well they all are placed under the CommandField type column.

You can add Edit, Delete, Select, Update and Cancel link buttons to your grid view control. In Asp.net 1.1 and using the datagrid control we had to write some code in order to get the datagrid in the edit mode. Grid View does not need any code to transform into edit mode and you can just switch to edit mode with a click of a button also you don't need any code in order to cancel the edit mode and switch the grid view back to its original condition.

As for the update the event is fired as soon as you click on the update button. For update you need to set the SqlDataSource control property. This property is called the Update Query and you can see this when you right click on the grid view button.

You can also set this property programmatically using the following code:

SqlDataSource1.UpdateCommand = "UPDATE Category Set CategoryID = @CategoryID";

I hope you liked this small article on the grid view control. Don't forget to check the code samples attached.

Happy Coding !

Attachments:

  Project Files: GridViewControl.zip