An Extensive Examination of the DataGrid Web Control: Part 8, Part 2
By Scott Mitchell
In Part 1 of this article we saw how to add a Delete button to
each row of the DataGrid and how to have this button fire the DataGrid's DeleteCommand
event
when clicked. Additionally, we looked at how to determine the primary key field value of the record whose
Delete button was clicked. In this part, we'll look at how to add a client-side confirmation messagebox
to the Delete button's client-side onclick
event!
Adding a Client-Side Confirmation Popup to the Delete Button
Since our DataGrid is allowing the user to permanently delete an item from the database, it would be wise of us to put in some sort of mechanism to make sure that the user really wants to delete the selected item, and that they just didn't accidentally hit the Delete button, or hit the Delete button for the wrong DataGrid item. To provide a level of protection, we can use some client-side script to pop up a JavaScript confirm messagebox asking the user if they really want to delete the item.
The JavaScript confirm Function |
---|
JavaScript contains a confirm function that takes as an input a string parameter.
The confirm function has the effect of displaying a model dialog box whose message is
that of the string parameter, and whose buttons include OK and Cancel. If the user clicks OK,
the confirm function returns a value of True; a value of False is returned if the user
clicks Cancel. For more information on the JavaScript confirm function see:
JavaScript
Confirm Form Submissions.
|
To have the JavaScript confirm
function run when the Delete button is clicked, we need to
add the needed JavaScript code to the Delete button's client-side onclick
event. The message
for the confirm dialog box should read: "Are you sure you want to delete FAQ #FAQID?", where
FAQID is the FAQID
value for the FAQ whose Delete button was clicked.
In order to specify client-side JavaScript code in an ASP.NET Web control's client-side event set,
we must use the control's Attributes
collection. For example, if we had a Button control,
we could use the following server-side code to add some client-side JavaScript code to the Button's
client-side onmouseover
event:
|
Now, with our example we need a JavaScript confirm
function call to the Delete button's
client-side onclick
event. First, realize that the Delete button is not a Button class
exactly, but a LinkButton class. The DataGrid's ButtonColumn control can be rendered as
either LinkButtons (the default) or Buttons, depending on the value of the ButtonControl's
ButtonType
property. (To make a ButtonColumn class contain buttons, set
ButtonType
to PushButton
.)
Also, notice that in our live demo the Button's
client-side onmouseover
event is added to the control's Attributes
collection
in the Page_Load
event handler. However, for the Delete button in our example we
cannot use the Page_Load
event handler since the Delete buttons have not been rendered by
this point. Furthermore, we need to know the FAQID
value for the particular row so that
we can tailor our confirm messagebox's string to include the item's FAQID
value.
When the DataGrid's DataBind()
method is called, the DataGrid enumerates through the items
of the DataSource
, creating a row for each item. The DataGrid fires the ItemDataBound
event after each added DataGrid row has been databound to the particular DataSource
item.
We can write an event handler for this event. Since the DataGrid has just added a row, we can programmatically
access the Delete LinkButton that has been generated by the ButtonColumn, tweaking the Attributes
collection so to add a client-side onclick
event.
To provide an event handler for the DataGrid's ItemDataBound
event, we must use the
following signature:
Sub eventHandlerName(sender
as Object, e as DataGridItemEventArgs)
|
Furthermore, we must set the DataGrid's OnItemDataBound
property to the
event handler name we choose. In our event handler, we need to programmatically reference the
LinkButton generated by the Delete ButtonColumn control and then set its client-side onclick
event via the Attributes
collection:
|
Realize that for every row that is added to the DataGrid the ItemDataBound
event is
fired. This includes the Header and Footer rows of the DataGrid. Hence, in the dgPopularFAQs_ItemDataBound
event handler we start by ensuring that we are not dealing with either the Header or Footer. If this
is the case, we go ahead and reference the LinkButton by referring to the DataGridItem
's
first column (i.e., e.Items.Cells(0)
), grabbing the first control in the column, the
LinkButton (i.e., Controls(0)
). Once we have this LinkButton referenced as a local variable
we can easily set its Attributes
property, as shown in the code above. Note that we add
the needed JavaScript code, inserting a dynamic value (the FAQID
) in the string parameter to
the confirm
function. We grab the FAQID
field of the current DataSource
item (which is stored in the variable DataGridItem
's DataItem
property) by using
the DataBinder.Eval
method.
One thing to note is that the confirm
function needs to return its value for it to have
the desired semantic effect. That is, note that in the JavaScript code we don't just say:
confirm('Are you sure you want ...');
, but rather: return confirm('Are you sure you want ...');
.
If you forget this return
the DataGrid item will be Deleted when the user click's the
Delete button regardless of if they hit OK or Cancel on the client-side confirm messagebox.
Conclusion
In this article we examined how to accomplish a few things: first, we looked at how to add a ButtonColumn class that, when clicked, would trigger the DataGrid's
DeleteCommand
event (the secret
was to set the ButtonColumn's CommandName
property to "Delete"); we also looked at how to
use the DataGrid's DataKeyField
and DataKeys
properties in order to determine
the primary key field value of the clicked DataGrid row; finally, we looked at how to add a client-side
confirm dialog box to ensure that the user really wanted to delete the record.
Happy Programming!