An Extensive Examination of the DataGrid Web Control: Part 8, Part 2

By Scott Mitchell

---

Read Part 1

---

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:

<script language="vb" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) 'Set the button's client-side onmouseover event btnClick.Attributes("onmouseover") = "alert('Hello, World!');" End Sub </script> <form runat="server"> <asp:button runat="server" Text="Click Me!" id="btnClick" /> </form>

[View a Live Demo!]

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)    ... End Sub

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:

<script language="vb" runat="server"> ... Sub dgPopularFAQs_ItemDataBound(sender as Object, e as DataGridItemEventArgs) ' First, make sure we're NOT dealing with a Header or Footer row If e.Item.ItemType <> ListItemType.Header AND _ e.Item.ItemType <> ListItemType.Footer then 'Now, reference the LinkButton control that the Delete ButtonColumn 'has been rendered to Dim deleteButton as LinkButton = e.Item.Cells(0).Controls(0) 'We can now add the onclick event handler deleteButton.Attributes("onclick") = "javascript:return " & _ "confirm('Are you sure you want to delete FAQ #" & _ DataBinder.Eval(e.Item.DataItem, "FAQID") & "?')" End If End Sub </script> <form runat="server"> <asp:datagrid id="dgPopularFAQs" runat="server" ... OnItemDataBound="dgPopularFAQs_ItemDataBound"> ... </asp:datagrid> </form>

[View a Live Demo!]

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!

By Scott Mitchell