Friday, September 21, 2012

EDIT and UPDATE GridView using AJAX MODALPOPUPEXTENDER

In this article I will explain how to edit and update data in gridview using AJAX ModalPopupExtender.

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