In this article I will explain how to edit and update data in gridview using AJAX ModalPopupExtender.
ASPX Code:
ASPX Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.7;
}
.pnlBackGround
{
position: fixed;
top: 10%;
left: 10px;
width: 300px;
height: 125px;
text-align: center;
background-color: White;
border: solid 3px black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblTitle" runat="server" Text="BINDING DEPARTMENT DETAILS FOR EDIT AND UPDATE OPERATIONS USING MODALPOPUPEXTENDER CONTROL OF AJAX CONTROL TOOLKIT"
ForeColor="Red"></asp:Label>
<br />
<br />
<asp:ScriptManager ID="Sc1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="gvDeptDtls" runat="server" AutoGenerateColumns="false" DataKeyNames="DeptCode"
OnRowCommand="gvDeptDtls_OnRowCommand" BackColor="#FFFFCC" ForeColor="Black">
<HeaderStyle BackColor="Chocolate" Font-Bold="true" />
<Columns>
<asp:ButtonField HeaderText="Edit" CommandName="EditRow" Text="Edit" ItemStyle-ForeColor="Blue" />
<asp:TemplateField HeaderText="Department Code">
<ItemTemplate>
<asp:Label ID="lblDeptCode" runat="server" Text='<%# Bind("DeptCode")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Department Name">
<ItemTemplate>
<asp:Label ID="lblDeptName" runat="server" Text='<%# Bind("DeptName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Department Description">
<ItemTemplate>
<asp:Label ID="lblDeptDescp" runat="server" Text='<%# Bind("DeptDescp")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnShowPopUp" runat="server" Style="display: none" />
<br />
<br />
<asp:Panel ID="Pn1" runat="server">
<asp:GridView ID="gvUpdate" runat="server" AutoGenerateColumns="false" BackColor="#FFFFCC"
ForeColor="Black" DataKeyNames="DeptCode">
<HeaderStyle BackColor="Chocolate" Font-Bold="true" />
<Columns>
<asp:TemplateField HeaderText="Department Code" Visible="false">
<ItemTemplate>
<asp:Label ID="lblDeptCode" runat="server" Text='<%# Bind("DeptCode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Department Name" ItemStyle-HorizontalAlign="Center"
ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:TextBox ID="txtDeptName" runat="server" Text='<%# Bind("DeptName") %>' Width="80px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Department Description" ItemStyle-HorizontalAlign="Center"
ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:TextBox ID="txtDeptDescp" runat="server" Text='<%# Bind("DeptDescp") %>' Width="100px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<br />
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="Mdp1" runat="server" TargetControlID="btnShowPopUp"
PopupControlID="Pn1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</div>
</form>
</body>
</html>
Code Behind:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; public partial class Forum_Topics_ModalPopup_editupdate_griddtls : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGrid(); } } protected DataTable CreateDataTable() { DataTable Dt = new DataTable(); Dt.Columns.Add("DeptCode", typeof(Int16)); Dt.Columns.Add("DeptName", typeof(String)); Dt.Columns.Add("DeptDescp", typeof(string)); return Dt; } protected void BindGrid() { /*JUST CREATE TWO ROWS*/ DataTable dtDept = CreateDataTable(); DataRow dr = dtDept.NewRow(); dr["DeptCode"] = 1; dr["DeptName"] = "Science"; dr["DeptDescp"] = "Science Dept"; dtDept.Rows.Add(dr); DataRow dr1 = dtDept.NewRow(); dr1["DeptCode"] = 2; dr1["DeptName"] = "Maths"; dr1["DeptDescp"] = "Mathematics Dept"; dtDept.Rows.Add(dr1); gvDeptDtls.DataSource = dtDept; gvDeptDtls.DataBind(); } protected void btnUpdate_Click(object sender, EventArgs e) { /*FETCH UPDATED VALUES OF THAT PARTICULAR ROW ON GRID*/ string DeptName, DeptDescp; int Dept_Code = 0; Dept_Code = Int32.Parse(ViewState["DeptCode"].ToString()); Dept_Code = Int32.Parse(((Label)gvUpdate.Rows[0].FindControl("lblDeptCode")).Text); DeptName = ((TextBox)gvUpdate.Rows[0].FindControl("txtDeptName")).Text; DeptDescp = ((TextBox)gvUpdate.Rows[0].FindControl("txtDeptDescp")).Text; /*MODIFY ORIGINAL GRID VALUES*/ DataTable DtUpdateGV = CreateDataTable(); for (int i = 0; i < gvDeptDtls.Rows.Count; i++) { DataRow dr = DtUpdateGV.NewRow(); if (Int32.Parse(((Label)gvDeptDtls.Rows[i].FindControl("lblDeptCode")).Text) == Dept_Code) { dr["DeptCode"] = Dept_Code; dr["DeptName"] = DeptName; dr["DeptDescp"] = DeptDescp; } else { dr["DeptCode"] = ((Label)gvDeptDtls.Rows[i].FindControl("lblDeptCode")).Text; dr["DeptName"] = ((Label)gvDeptDtls.Rows[i].FindControl("lblDeptName")).Text; dr["DeptDescp"] = ((Label)gvDeptDtls.Rows[i].FindControl("lblDeptDescp")).Text; } DtUpdateGV.Rows.Add(dr); } gvDeptDtls.DataSource = null; gvDeptDtls.DataBind(); gvDeptDtls.DataSource = DtUpdateGV; gvDeptDtls.DataBind(); } protected void showModalPopUp(int GridRowNo) { /*BIND GRID IN THE POP UP */ DataTable DtUpdate = CreateDataTable(); DataRow dr = DtUpdate.NewRow(); dr["DeptCode"] = ((Label)gvDeptDtls.Rows[GridRowNo].FindControl("lblDeptCode")).Text; dr["DeptName"] = ((Label)gvDeptDtls.Rows[GridRowNo].FindControl("lblDeptName")).Text; dr["DeptDescp"] = ((Label)gvDeptDtls.Rows[GridRowNo].FindControl("lblDeptDescp")).Text; DtUpdate.Rows.Add(dr); gvUpdate.DataSource = DtUpdate; gvUpdate.DataBind(); /*WILL SHOW THE MODALPOPUP*/ Mdp1.Show(); } protected void gvDeptDtls_OnRowCommand(object sender, GridViewCommandEventArgs e) { /*WRITE CODE HERE TO OPEN MODALPOP UP ON CLICK OF EDIT LINK BUTTON IN THE GRID*/ if (e.CommandName == "EditRow") { int rowIndex = Convert.ToInt32(e.CommandArgument); int DeptCode = Convert.ToInt32(gvDeptDtls.DataKeys[rowIndex].Value); ViewState["DeptCode"] = DeptCode; showModalPopUp(rowIndex); } } }
No comments:
Post a Comment