Display GridView Row details in Ajax ModalPopupExtender on Button Click using C# and VB.Net in ASP.Net

Last Reply 14 days ago By pandeyism

Posted 15 days ago

i am selecting row from gridview for edit, then date which is in row not getting display in popup window

here is screen shot 

https://ibb.co/rFPLz2W

please guide

<%@ page language="C#" autoeventwireup="true" codebehind="MasterFilemp.aspx.cs" inherits="WebApplication1.MasterFilemp" %>
 
<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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">
    <link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({
                    message: '<table align = "center"><tr><td>' + '<img src="images/loadingAnim.gif"/></td></tr></table>',
                    css: {},
                    overlayCSS: {
                        backgroundColor: '#000000', opacity: 0.6
                    }
                });
            });
            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        }
        $(document).ready(function () {
            BlockUI("<%=pnlAddEdit.ClientID %>");
            $.blockUI.defaults.css = {};
        });
        function Hidepopup() {
            $find("popup").hide();
            return false;
        }
    </script>
</head>
<body style="margin: 0; padding: 0">
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <title>GridView Add, Edit, Delete AJAX Way</title>
            <asp:GridView ID="GridView1" runat="server" Width="550px" AutoGenerateColumns="false"
                AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green" AllowPaging="true"
                OnPageIndexChanging="OnPaging" PageSize="15">
                <Columns>
                    <asp:BoundField DataField="EnrollNumber" HeaderText="Employee ID" HtmlEncode="true" />
                    <asp:BoundField DataField="EmpName" HeaderText="Employee Name" HtmlEncode="true" />
                    <asp:BoundField DataField="FatherName" HeaderText="Father Name" HtmlEncode="true" />
                    <asp:BoundField DataField="SecNam" HeaderText="Section" HtmlEncode="true" />
                    <asp:BoundField DataField="JoinDate" HeaderText="Join Date" HtmlEncode="true" />
                    <asp:TemplateField ItemStyle-Width="30px" HeaderText="EnrollNumber">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" OnClick="Edit"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <AlternatingRowStyle BackColor="#C2D69B" />
            </asp:GridView>
            <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="Add" />
            <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" Style="display: none">
                <asp:Label Font-Bold="true" ID="Label4" runat="server" Text="Employee Details"></asp:Label><br />
                <table align="center">
                    <tr>
                        <td><asp:Label ID="Label1" runat="server" Text="EnrollNumber"></asp:Label></td>
                        <td><asp:TextBox ID="txtEmpID" Width="40px" MaxLength="5" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td><asp:Label ID="Label2" runat="server" Text="Employee Name"></asp:Label></td>
                        <td><asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td><asp:Label ID="Label3" runat="server" Text="Father Name"></asp:Label></td>
                        <td><asp:TextBox ID="txtFahterName" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td><asp:Label ID="Label5" runat="server" Text="Section"></asp:Label></td>
                        <td>
                            <asp:DropDownList ID="ddlSecID" runat="server">
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <tr>
                                <td><asp:Label ID="Label6" runat="server" Text="Join Date"></asp:Label></td>
                                <td><asp:TextBox ID="txtjdate" TextMode="Date" runat="server"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td><asp:Button ID="btnSave" runat="server" Text="Save" OnClick="Save" /></td>
                                <td><asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return Hidepopup()" /></td>
                            </tr>
                </table>
            </asp:Panel>
            <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton><cc1:ModalPopupExtender
                ID="popup" runat="server" DropShadow="false" PopupControlID="pnlAddEdit" TargetControlID="lnkFake"
                BackgroundCssClass="modalBackground">
            </cc1:ModalPopupExtender>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1" />
            <asp:AsyncPostBackTrigger ControlID="btnSave" />
        </Triggers>
    </asp:UpdatePanel>
    </form>
</body>
</html>

 

    public partial class MasterFilemp : System.Web.UI.Page
    {
        SqlConnection con = new SqlConnection("Data Source=SERVER1\\SQLEXPRESS;Integrated Security=SSPI;Initial Catalog=SPS;MultipleActiveResultSets=True;");
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                loadSection();
                this.BindData();             
            }
        }
        private void loadSection()
        {
            con.Open();
            SqlDataAdapter adpbp = new SqlDataAdapter("select * from Sections ", con);
            DataSet dsbp = new DataSet();
            adpbp.Fill(dsbp);
            ddlSecID.DataSource = dsbp.Tables[0];
            ddlSecID.DataTextField = "SecNam";
            ddlSecID.DataValueField = "Secid";
            ddlSecID.DataBind();
            // ddlSecID.Items.Insert(0, new ListItem("Select Item Name", ""));
            con.Close();
        }
 
        private void BindData()
        {
            string strQuery = "select E.EnrollNumber,E.EmpName,E.FatherName,S.SecNam,E.JoinDate  " +
                               " from EmpMaster E inner join Sections S on E.Secid=S.SecId";
            SqlCommand cmd = new SqlCommand(strQuery, con);
            GridView1.DataSource = GetData(cmd);
            GridView1.DataBind();
        }
 
        private DataTable GetData(SqlCommand cmd)
        {
            DataTable dt = new DataTable();
 
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    con.Open();
                    sda.SelectCommand = cmd;
                    sda.Fill(dt);
                    return dt;
                }
            }
            con.Close();
        }
 
        protected void OnPaging(object sender, GridViewPageEventArgs e)
        {
            this.BindData();
            GridView1.PageIndex = e.NewPageIndex;
            GridView1.DataBind();
        }
 
        protected void Edit(object sender, EventArgs e)
        {
            using (GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)
            {
                txtEmpID.ReadOnly = true;
                txtEmpID.Text = row.Cells[0].Text;
                txtEmpName.Text = row.Cells[1].Text;
                txtFahterName.Text = row.Cells[2].Text;          
                ddlSecID.ClearSelection();
                ddlSecID.Items.FindByText(row.Cells[3].Text).Selected = true;
                txtjdate.Text = row.Cells[4].Text;
                popup.Show();
            }
        }
 
        protected void Add(object sender, EventArgs e)
        {
            txtEmpID.ReadOnly = false;
            txtEmpID.Text = string.Empty;
            txtEmpName.Text = string.Empty;
            txtFahterName.Text = string.Empty;
            txtjdate.Text = string.Empty;
            ddlSecID.Items.Insert(0, new ListItem("Select Section", ""));
            popup.Show();
        }
 
        protected void Save(object sender, EventArgs e)
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.CommandText = "[AddUpdateEmpMaster]";
                cmd.Parameters.AddWithValue("@EnrollNumber", txtEmpID.Text);
                cmd.Parameters.AddWithValue("@EmpName", txtEmpName.Text);
                cmd.Parameters.AddWithValue("@FatherName", txtFahterName.Text);
                cmd.Parameters.AddWithValue("@Secid", ddlSecID.SelectedValue);
                GridView1.DataSource = this.GetData(cmd);
                GridView1.DataBind();
            }
        }
    }

 

Posted 14 days ago

Hi akhter,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GridView Add, Edit, Delete AJAX Way</title>
    <link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.blockUI.js" type="text/javascript"></script>
    <script type="text/javascript">
        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({ message: '<table align = "center"><tr><td>' +
     '<img src="images/loadingAnim.gif"/></td></tr></table>',
                    css: {},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6
                    }
                });
            });
            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        }
        $(document).ready(function () {

            BlockUI("<%=pnlAddEdit.ClientID %>");
            $.blockUI.defaults.css = {};
        });
        function Hidepopup() {
            $find("popup").hide();
            return false;
        }
    </script>
</head>
<body style="margin: 0; padding: 0">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" Width="550px" AutoGenerateColumns="false"
                AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green" AllowPaging="true"
                OnPageIndexChanging="OnPaging" PageSize="10">
                <Columns>
                    <asp:BoundField DataField="EnrollNumber" HeaderText="Employee ID" HtmlEncode="true" />
                    <asp:BoundField DataField="EmpName" HeaderText="Employee Name" HtmlEncode="true" />
                    <asp:BoundField DataField="FatherName" HeaderText="Father Name" HtmlEncode="true" />
                    <asp:BoundField DataField="SecNam" HeaderText="Section" HtmlEncode="true" />
                    <asp:BoundField DataField="JoinDate" HeaderText="Join Date" HtmlEncode="true" />
                    <asp:TemplateField ItemStyle-Width="30px" HeaderText="CustomerID">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" OnClick="Edit"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <AlternatingRowStyle BackColor="#C2D69B" />
            </asp:GridView>
            <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="Add" />
            <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" Style="display: none">
                <asp:Label Font-Bold="true" ID="Label4" runat="server" Text="Customer Details"></asp:Label>
                <br />
                <table align="center">
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text="EnrollNumber"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEnrollNumber" Width="40px" MaxLength="5" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label2" runat="server" Text="EmpName"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label3" runat="server" Text="FatherNam"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtFatherNam" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label5" runat="server" Text="SecName"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="ddlSecID" runat="server">
                                <asp:ListItem Text="Select" Value="0" />
                                <asp:ListItem Text="Baby" />
                                <asp:ListItem Text="Lazy" />
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label6" runat="server" Text="JoinDate"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtJoinDate" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnSave" runat="server" Text="Save" />
                        </td>
                        <td>
                            <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return Hidepopup()" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
            <cc1:ModalPopupExtender ID="popup" runat="server" DropShadow="false" PopupControlID="pnlAddEdit"
                TargetControlID="lnkFake" BackgroundCssClass="modalBackground">
            </cc1:ModalPopupExtender>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1" />
            <asp:AsyncPostBackTrigger ControlID="btnSave" />
        </Triggers>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindData();
    }
}

private void BindData()
{
    GridView1.DataSource = GetData();
    GridView1.DataBind();
}

private DataTable GetData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("EnrollNumber", typeof(int)), new DataColumn("EmpName", typeof(string)), new DataColumn("FatherName", typeof(string)), new DataColumn("SecNam", typeof(string)), new DataColumn("JoinDate", typeof(DateTime)) });
    dt.Rows.Add(1, "Mudassar Khan", "ABCD", "Baby", DateTime.Now);
    dt.Rows.Add(2, "Joh Hammod", "EFG", "Lazy", DateTime.Now.AddDays(1));
    dt.Rows.Add(2, "Robert", "RDJ", "Daddy", DateTime.Now.AddDays(2));
    GridView1.DataSource = dt;
    return dt;
}

protected void OnPaging(object sender, GridViewPageEventArgs e)
{
    this.BindData();
    GridView1.PageIndex = e.NewPageIndex;
    GridView1.DataBind();
}

protected void Edit(object sender, EventArgs e)
{
    using (GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)
    {
        txtEnrollNumber.Text = row.Cells[0].Text;
        txtEmpName.Text = row.Cells[1].Text;
        txtFatherNam.Text = row.Cells[2].Text;
        ddlSecID.ClearSelection();
        if (ddlSecID.Items.FindByText(row.Cells[3].Text) != null)
        {
            ddlSecID.Items.FindByText(row.Cells[3].Text).Selected = true;
        }
        txtJoinDate.Text = Convert.ToDateTime(row.Cells[4].Text).ToString("dd/MM/yyyy");
        popup.Show();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Me.BindData()
        End If
    End Sub

    Private Sub BindData()
        GridView1.DataSource = GetData()
        GridView1.DataBind()
    End Sub

    Private Function GetData() As DataTable
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("EnrollNumber", GetType(Integer)), New DataColumn("EmpName", GetType(String)), New DataColumn("FatherName", GetType(String)), New DataColumn("SecNam", GetType(String)), New DataColumn("JoinDate", GetType(DateTime))})
        dt.Rows.Add(1, "Mudassar Khan", "ABCD", "Baby", DateTime.Now)
        dt.Rows.Add(2, "Joh Hammod", "EFG", "Lazy", DateTime.Now.AddDays(1))
        dt.Rows.Add(2, "Robert", "RDJ", "Daddy", DateTime.Now.AddDays(2))
        GridView1.DataSource = dt
        Return dt
    End Function

    Protected Sub OnPaging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
        Me.BindData()
        GridView1.PageIndex = e.NewPageIndex
        GridView1.DataBind()
    End Sub

    Protected Sub Edit(ByVal sender As Object, ByVal e As EventArgs)
        Using row As GridViewRow = CType((CType(sender, LinkButton)).Parent.Parent, GridViewRow)
            txtEnrollNumber.Text = row.Cells(0).Text
            txtEmpName.Text = row.Cells(1).Text
            txtFatherNam.Text = row.Cells(2).Text
            ddlSecID.ClearSelection()

            If ddlSecID.Items.FindByText(row.Cells(3).Text) IsNot Nothing Then
                ddlSecID.Items.FindByText(row.Cells(3).Text).Selected = True
            End If

            txtJoinDate.Text = Convert.ToDateTime(row.Cells(4).Text).ToString("dd/MM/yyyy")
            popup.Show()
        End Using
    End Sub

Screenshot