Pop up a message to confirm record delete from datagrid using Javascript
I saw many people asking how to pop up a message to confirm record delete from datagrid.
I have used XML as the database for this sample project.
I have attached complete source code with the sample XML (inside Demo folder) i have used in the project.
You need to place XML file or Demo folder inside the zip by looking the path in web.config.
Below is the complete code for Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript">
function Confirm()
{
var fRet;
fRet = confirm('Do you want to Delete the record?');
if(fRet==true)
__doPostBack('Delete',fRet);
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="overflow: auto; width: 550px; height: 100%">
<asp:DataGrid ID="dgProducts" runat="server" AutoGenerateColumns="False" BackColor="#DEBA84"
BorderColor="#DEBA84" BorderWidth="1px" CellPadding="3" BorderStyle="None" CellSpacing="2"
CssClass="HCStyle" OnDeleteCommand="dgProducts_DeleteCommand">
<Columns>
<asp:BoundColumn DataField="ProdId" HeaderText="Product Id">
<ItemStyle HorizontalAlign="Left" Wrap="False"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="ProdName" HeaderText="Product Name">
<ItemStyle HorizontalAlign="Left" Wrap="False"></ItemStyle>
</asp:BoundColumn>
<asp:ButtonColumn CommandName="Delete" HeaderText="Delete" Text="<img border=0 valigh=top align=center src='images\icon-delete.gif'>">
<ItemStyle HorizontalAlign="Left" />
</asp:ButtonColumn>
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<SelectedItemStyle BackColor="#738A9C" ForeColor="White" Font-Bold="True" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" Mode="NumericPages" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
</asp:DataGrid>
<asp:Label ID="lblMsg" runat="server" Style="z-index: 100; left: 11px; position: absolute;
top: 197px"></asp:Label>
</div>
</form>
</body>
</html>
Below is the complete code for Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string arg = Request.Form["__EVENTTARGET"];
string val = Request.Form["__EVENTARGUMENT"];
if (arg == "Delete")
{
//Call delete function if user click yes.
DeleteRecord();
}
if (!IsPostBack)
{
//Pupulate data from XML on page load
PopulateProdDet();
}
}
private void PopulateProdDet()
{
string ProdFilePath = System.Configuration.ConfigurationManager.AppSettings["ProductDetails"];
DataSet dsProdDet = new DataSet();
//Read XML and bind to a datagrid
dsProdDet.ReadXml(ProdFilePath);
dgProducts.DataSource = dsProdDet;
dgProducts.DataBind();
}
protected void dgProducts_DeleteCommand(object source, DataGridCommandEventArgs e)
{
int indx = e.Item.ItemIndex;
if (e.CommandName == "Delete")
{
//Call Javascript function to pop up message
Page.RegisterStartupScript("Confirm", "<script>Confirm();</script>");
//Below session variable hava the product id,
//you can use this id to delete the product using DeleteRecord() method
string test = dgProducts.Items[indx].Cells[0].Text;
Session["ProdDelRecord"] = dgProducts.Items[indx].Cells[1].Text;
}
}
private void DeleteRecord()
{
lblMsg.Text = "Record deleted";
//Code to delete record from XML/database
}
}
in web.config you have to add path of the XML file,
<appSettings>
<add key="ProductDetails" value="C:\Demo\Product.xml"/>
</appSettings>
Follow
Please add code under code block not a attachment