Advanced Uses for the GridView Tool ASP.NET 4.0

Category: ASP.NET

So, we know how to use the GridView Tool and how to give it some basic formatting. In this tutorial we will explore more advanced uses of the GridView, which will include:

  • Adding Custom Fields
  • Calling Command Fields in C#
  • Pulling Data from a GridView

Download Assets

If you do not have your Get Your Grid On tutorial file handy download mine to follow along.

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Adding Custom Fields

  1. On the “default.aspx” page click the smart tab on the GridView controller, and then click the Edit Columns link and it will open up our Fields dialog box. 
  2. Under the available field selector we are going select the Select Field under the Command Field and hit the Add button. It should now be in your Selected Fields Area.
  3. In the properties of the Select field there is a plethora of things we can change, I will step through the most common:
  • Under the Appearance section you will see several Command Field names and their Text Values or Image URL’s. This is because Select is part of the command field along with delete, insert, update, cancel, and new. You can change these values such as text or the image URL to and depending on the Button Type it will reflect as such. 
  • Button Type: Changes the type of field you are adding such as a link, button, or image.
  • Header Text/URL: This will change the header text of the field you are editing or add an image instead for further customization.
  • Footer Text/URL: Much like the header text you can change this text field or add an image below the selected field.
  • Under the Behavior section there are lots of Boolean values. Mainly turning on whether or not it is visible during such state or if the value is visible at any point. 
  • Under the Styles section you will find tons of aesthetic options for the different part of your fields the Control, Header, Footer and Items of the field can all be modified or be given a CSS class for a more custom design experience. The properties here are self-explanatory. 

Even if a certain field is hidden you can still pull data from it later on. It is very common, for example, to hide your id field from the user and use it in your functions afterwards.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

  1. Now that we have an understanding of what these properties can do let’s make sure the Select field is selected and change the Button Type to image. Under the Select Image URL hit the ellipsis (…) button and in the dialog box select the images folder on the left and select the file named “plus.png”.
  2. Select the Command Field in the Selected Fields area. We are going to add images to our Delete and Edit buttons. In the properties view select Image as the Button Type and change the Delete URL to close.jpg, Edit URL to edit.png, and Update URL to edit.png. We changed the update button to look like the edit button so that when the user clicks it feels more like a toggle but that is simply preference. However you will always need an update button if you plan on actually letting your users changing the content.
  3. In the Command Field under the behaviors tab change Show Cancel Button to false. This will make it so that when we click the Edit icon we created there will only be an update button, they can simply update it with the same information which is common but you can also provide a cancel button for the user to make sure no changes are made.
  4. Lastly, we will discuss the Template Field. This field is a custom column that you can use to insert a blank column into your grid view. A lot of times it is used for formatting such as adding a visual cue. For example you would have your customers, a template view with a bunch of green arrows pointing to the next value in the grid. So essentially the template field would be solely populated with a green arrow in this data field.

Calling Command Fields in C#

Now we will delve into the code side of our grid view. We are going to create a function that runs when a user click’s our custom add button.

  1. To create our own command we need to first create a custom button in our field. Select the Select field we added previously and delete it. 
  2. Add a Button Field and in the Properties window change its Type to Image and under Image URL choose “plus.png” once again. 
  3. In the Button properties window you will notice a new field under the Behavior Tab named Command Name. This will be the name of the command when we call it in the code behind. Let’s name it addItem and then click ok to accept the new button.
  4. Now with our GridView selected on the “default.aspx” page go to the Properties Window. In the properties window click the Events button (little lightning bolt).
  5. In this window go down to the RowCommand event. This is when we want to run our function because when we click our button it tries to run a command and this event will catch it. Double Click this to create the function in our code behind.
  6. In the code behind under the GridView1_RowCommand we will type the following if statement.
protected void GridView1_RowCommand(Object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "addItem")
{}
}
  1. The GridView1_RowCommand runs through all of the commands within the GridView. To catch the one that was clicked we use an “if” statement to catch it. In this case we used the addItem button we created with a command name of “addItem”.

Pulling Data From A GridView

Now that we have our function created and the if statement catching our AddItem command we are going to use this function to pull data our of our GridView

  1. Before we go any further switch back out to design mode in our “default.aspx” file and drag out a Label, give it an ID of resultTxt. Once you have done that switch back to the code behind.
  2. Add the following code inside of our “if” statement and we will walk through exactly what it is doing.
if (e.CommandName == "addItem")
{
  int index = Convert.ToInt32(e.CommandArgument)
  GridViewRow selectedRow = GridView1.Rows[index]
  TableCell curItemName = selectedRow.Cells[0];
  string strItemName = curItemName.Text; resultTxt.Text = strItemName; 
}
  1. The first line is grabbing the index the row the command is coming from which is what the RowCommand function is grabbing. Then we convert it to an integer. The second line is calling the specific row using the index we just attained. The third row uses the row we just received and grabs the specific cell in that row, in this instance we are grabbing cell “0” which is the food name in our database. Finally we will grab the value by checking that cell’s Text property. In this example we will set our resultTxt.Text label to receive the data.
  2. Run the application! Click any plus button and it will be populated by the corresponding rows food name.

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Success

Congratulations! That wasn’t so bad was it? You should now feel comfortable using the GridView tool in any way. There are many ways to manipulate and use the data pulled from a GridView. Also, now that you know how to manipulate and modify the data via the Fields dialog box you can build and display your data in any format you choose!