ASP.NET: Confirm GridView Deletes with the ModalPopupExtender

I was looking for good examples of how the ModalPopupExtender control could be used as a confirmation dialog. I was especially curious in seeing implementations where the popup is used to confirm deletes performed on rows of a GridView. I couldn't find any good samples so I figured I would take a shot at it.

Add the GridView to your page, placing it inside an UpdatePanel.

<form id="form1" runat="server">
<div>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate> 
<asp:Label ID="lblTitle" runat="server" Text="ToDo List" BackColor="lightblue" Width="95%" />
<asp:GridView 
ID="gvToDoList" runat="server" AutoGenerateColumns="false" Width="95%">
<AlternatingRowStyle BackColor="aliceBlue" />
<HeaderStyle HorizontalAlign="Left" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Item" HeaderText="Description" />
<asp:BoundField DataField="IsCompleted" HeaderText="Complete?" /> 
</Columns> 
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel> 
</div>
</form>
Nothing out of the ordinary here, just a basic GridView

contained in an UpdatePanel (don't forget to set UpdateMode to Conditional)

Add a TemplateField with a Delete button. Wire up an event handler for the button click

<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:Button ID="btnDelete" runat="server" OnClick="BtnDelete_Click" Text="Delete" />

</ItemTemplate>

</asp:TemplateField>

You can either explicitly use the OnClick event of the delete button or add the CommandName attribute and implement the RowDeleting event. I chose the former for this sample.

* I also thought about adding the ModalPopupExtender embedded in each of the ItemTemplates and having the OK button just be the delete command for the row. I didn't go down this path because doing so would have included all of the popup markup for each row in the grid. Usual page size's for our gridview is anywhere from 25 to 50 rows. So this didn't seem like a good approach.

Add the HTML markup for the modal popup

<div id="div" runat="server" align="center" class="confirm" style="display:none">
<img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>

Nothing fancy here, just a div with a couple of buttons and a warning image

<ajaxToolKit:ModalPopupExtender runat="server" BehaviorID="mdlPopup" TargetControlID="div" PopupControlID="div"
OkControlID="btnOk" CancelControlID="btnNo" BackgroundCssClass="modalBackground"/>

Once the ModalPopupExtender has been added to the page, you can go ahead and configure its attributes. The PopupControlID is the id of the div we created in Step 3 that contains the markup we want displayed by the ModalPopup. The OkControlID refers to the ID of the OK button and the CancelControlID refers to the Cancel button (clicking either will dismiss the popup).

In most cases the TargetControlID would point to the button that causes the ModalPopup to be displayed. But for this example, we will always be hiding and showing the popup explicitly from javascript, we can just point this property to our div (this is a required property so we have to set it to something. Some people recommend putting a hidden button or some other element on the page to fake it out, but here I am just setting it to our div).

Add an OnClientClick for the delete button

<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
OnClick="BtnDelete_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>

Next we go back to the markup for our delete button and add the OnClientClick attribute. For the value, we invoke the showConfirm javascript function (created in the next step) passing it a reference to the delete button element. The OnClientClick handler also returns false so the page won't postback after the client script is done running. If this isn't done the delete will happen before the user has a chance to confirm or disallow it!

Add the supporting javascript

<script type="text/javascript">
// keeps track of the delete button for the row
// that is going to be removed
var _source;
// keep track of the popup div
var _popup;
function showConfirm(source){
this._source = source;
this._popup = $find('mdlPopup');
// find the confirm ModalPopup and show it
this._popup.show();
}
function okClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// use the cached button as the postback source
__doPostBack(this._source.name, '');
}
function cancelClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// clear the event source
this._source = null;
this._popup = null;
}
</script><ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server"
TargetControlID="div" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();"
CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />

Now we can implement the final piece. In the previous step, we wired the OnClientClick event of the delete button to the showConfirm javascript function. Now we can implement this function. First we store a reference to the delete button as well as display the modal popup by calling show() on the modal popups animation component (note: in ASP.NET AJAX, DOM elements are retrieved using $get('id') and components are retrieved using $find('id')). The reference to the delete button is stored so we can use it later to initiate the postback (if the user did indeed confirm the delete).

Finally, the ModalPopupExtender contains two properties that allow you to hook into the OK and Cancel buttons and run a little bit of code on the client when the dialog is dismissed. We will hook into both of these events to hide the dialog as well as start the postback causing the item to be deleted if the delete was confirmed.

Put it all together

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Delete Confirm Example</title>

/// <summary>

///

/// </summary>

public class ToDo

{

private int _id;

private string _item;

private bool _isCompleted;

public ToDo(int id, string item, bool isCompleted)

{

this._id = id;

this._item = item;

this._isCompleted = isCompleted;

}

public int ID

{

get { return this._id; }

}

public string Item

{

get { return this._item; }

}

public bool IsCompleted

{

get { return this._isCompleted; }

}

/// <summary>

///

/// </summary>

private System.Collections.Generic.List<ToDo> ToDoList

{

get

{

System.Collections.Generic.List<ToDo> item = this.Session["ToDoList"] as System.Collections.Generic.List<ToDo>;

if (item == null)

{

item = new System.Collections.Generic.List<ToDo>();

item.Add(new ToDo(1, "Go to the store", false));

item.Add(new ToDo(2, "Go to work", true));

item.Add(new ToDo(3, "Feed the dog", false));

item.Add(new ToDo(4, "Take a nap", true));

item.Add(new ToDo(5, "Eat some lunch", false));

this.Session["ToDoList"] = item;

}

return item;

}

/// <summary>

///

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

this.gvToDoList.DataSource = this.ToDoList;

this.gvToDoList.DataBind();

}

/// <summary>

///

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void BtnDelete_Click(object sender, EventArgs e)

{

// get the gridviewrow from the sender so we can get the datakey we need

Button btnDelete = sender as Button;

GridViewRow row = (GridViewRow)btnDelete.NamingContainer;

// find the item and remove it

ToDo itemToRemove = this.ToDoList[row.RowIndex];

this.ToDoList.Remove(itemToRemove);

// rebind the datasource

this.gvToDoList.DataSource = this.ToDoList;

this.gvToDoList.DataBind();

}

</script>

// keeps track of the delete button for the row

// that is going to be removed

var _source;

// keep track of the popup div

var _popup;

function showConfirm(source){

this._source = source;

this._popup = $find('mdlPopup');

// find the confirm ModalPopup and show it

this._popup.show();

}

function okClick(){

// find the confirm ModalPopup and hide it

this._popup.hide();

// use the cached button as the postback source

__doPostBack(this._source.name, '');

}

function cancelClick(){

// find the confirm ModalPopup and hide it

this._popup.hide();

// clear the event source

this._source = null;

this._popup = null;

}

</script>

<style>

.modalBackground {

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.confirm{

background-color:White;

padding:10px;

width:370px;

}

</style>

</head>

<body>

<asp:ScriptManager ID="scriptManager" runat="server" />

<div>

Example of using a ModalPopupExtender as a delete confirm button<br />

for the indivdual rows of a GridView. To test out the functionality,<br />

click the Delete button of any of the rows and watch what happens.<br />

</p>

<br />

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">

<asp:Label ID="lblTitle" runat="server" Text="ToDo List" BackColor="lightblue" Width="95%" />

<asp:GridView

ID="gvToDoList" runat="server" AutoGenerateColumns="false" Width="95%">

<asp:BoundField DataField="ID" HeaderText="ID" />

<asp:BoundField DataField="Item" HeaderText="Description" />

<asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />

<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">

<asp:Button

ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"

OnClick="BtnDelete_Click" Text="Delete" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

<ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server"

TargetControlID="div" PopupControlID="div"

OkControlID="btnOk" OnOkScript="okClick();"

CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />

<img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?

<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />

<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />

</div>

</form>

</body>

</html>

ASP.NET

Search This Blog

Wednesday, September 8, 2010

Confirm GridView Deletes with the ModalPopupExtender

No comments:

Post a Comment