BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
The gridview control is at the heart of every ASP.NET webpage, displaying rows of data and allowing you to add, edit and delete records. This lengthy blog explains how to master this complex control.
- An introduction to GridView Controls
- Traps to Avoid when using Gridviews
- Creating GridView Controls
- Formatting Gridviews
- Template Fields / Template Columns
- Conditional formatting (RowDataBound Events)
- You clicked on a Gridview? The RowCommand Event (this blog)
- Sorting a Gridview
Posted by Andy Brown on 24 September 2012
You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
You clicked on a Gridview? The RowCommand Event
The thing we want to do could hardly be simpler. When someone clicks on an Edit or Delete button ...
Someone about to click on the Edit button for a task.
... we want to display a form allowing the user to edit or confirm deletion of the task in question:
This form should appear (creating it is covered in a later blog on user controls, to be written soon!).
The silly-sounding question is: how can we tell what happened on the gridview? The answer is astonishingly complicated!
Setting the Command Name
The first thing to do is to tell each image button, command button or link button what action should be associated with it:
Here the CommandName of the image button is set to change.
You can use any terms you like, but I've found simple verbs work well (so for this page's example I've used change and remove).
Some actions are handled internally by gridviews. These are: select, edit, delete and update. Don't use these words as command names, otherwise your gridview won't work the way you expect it to!
Setting the Command Argument
Now that each button knows what it's doing, the next question is: which record is it doing it to? There are a few ways to communicate this to a gridview's event handler, but my preferred way is by setting the command argument:
Here we've set the command argument for this image button to be the primary key in the underlying table.
The weird syntax denotes that this is a server-side request (so the gridview is deriving the command argument from the TaskId field in the gridview's underlying data source). However, once you've typed it in 30 or 40 times it'll become second nature!
The HTML for our GridView
Let's now pause for a moment and take stock. This is what our gridview looks like now:
The underlying layout for our gridview - now we just need to handle the events!
Handling the RowCommand Event
When someone clicks on a button, what does the gridview know? Answer: that something happened! Getting a gridview to divulge its secrets is like getting your teenage daughter to read out her diary to you: difficult.
The first thing to do is to associate code with the RowCommand event:
Select the gridview on the left-hand side, then the RowCommand event on the right.
In C#, you'd double-click on the RowCommand event for the gridview's properties:
Double-click on this event in a gridview's properties to assign an event-handler to the RowCommand event.
Don't be tempted to double-click on the GridView to bring up the event-handler, as this preselects the SelectedIndexChanged event instead.
The Event Arguments for the RowCommand Event
When you type e. into the RowCommand event handler, you see what you have to work with:
This is the VB version - the C# version would look similar.
Where to go from here? The answer is that you know that:
- the command name will be either change or remove; and
- the command argument will be the number of the task to edit or delete.
However, you must be careful that your user didn't just try to sort a column (this should be handled in the gridview's Sorting event, as described in the next part of this blog). So your code should look something like this in VB:
Protected Sub gv_RowCommand(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs _
) Handles gv.RowCommand
'if sorting, do so using separate SORTING event code
If e.CommandName.ToUpper = "SORT" Then Exit Sub
'edit or delete the task, depending on what doing
Dim TaskId As Integer = Convert.ToInt16(e.CommandArgument)
Select Case e.CommandName.ToLower
lblWhat.Text = "Deleting task " & TaskId.ToString
lblWhat.Text = "Editing task " & TaskId.ToString
The C# code would look similar, but using a switch statement to test the various possible values of the command name.
All we've done above is to display what should be done on a label, to check that the gridview row command has been detected correctly. For how to now show the correct details on a separate form, either use a FormView or DetailsView control, or read my user controls blog (to be written shortly).