How To Open Modal PopUp Inside Gridview

ASP.NET is an open-source, server-side web-application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, applications and services.

In this article, I will show you how to open modal pop up on the click of GridView row. This can be useful in many scenarios like showing details or editing the record without leaving the page.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ccl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Grd_SelectedIndexChanged(object sender, EventArgs e)
    {
        GridViewRow row = ((GridView)sender).SelectedRow;

        if (row == null) return;

        ModalPopupExtender extender = row.FindControl("extPerson") as ModalPopupExtender;


        if (extender != null)
        {
            extender.Show();
        }

    }
    private DataSet CreateDS()
    {
        DataSet ds = new DataSet();
        if (Session["ds"] == null)
        {
            DataTable dt = new DataTable("PersonData");
            DataRow dr;
            dt.Columns.Add(new DataColumn("Person_ID", typeof(Int32)));
            dt.Columns.Add(new DataColumn("PersonName", typeof(string)));
            dt.Columns.Add(new DataColumn("Company", typeof(string)));
            for (int i = 1; i < 10; i++)
            {
                dr = dt.NewRow();
                dr[0] = i;
                dr[1] = "Person " + i;
                dr[2] = "Company " + i;
                dt.Rows.Add(dr);
            }
            DataColumn parentCol;
            parentCol = dt.Columns["Person_ID"];

            ds.Tables.Add(dt);
            DataColumn[] PrimaryKeyColumns = new DataColumn[1];
            PrimaryKeyColumns[0] = dt.Columns["Person_Id"];
            dt.PrimaryKey = PrimaryKeyColumns;

            Session["ds"] = ds;
        }
        else
        {
            ds = (DataSet)Session["ds"];
        }
        return ds;

    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this.Grd.DataSource = CreateDS();
            this.Grd.DataBind();
        }

    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManger1" runat="Server"></asp:ScriptManager>
        <div>
            <asp:GridView ID="Grd" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="Grd_SelectedIndexChanged">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton ID="lblPerson" runat="server" Text='<%# Eval("PersonName") %>' />
                            <asp:Panel ID="pnlPerson" runat="server" Style="display: none" Width="400px" Height="400px"
                                BackColor="CadetBlue">
                                <div style="float: right;">
                                    <asp:LinkButton ID="lnkClose" runat="server">Close</asp:LinkButton>
                                </div>
                                <asp:TextBox ID="txt" runat="server"></asp:TextBox>
                            </asp:Panel>
                            <ccl:ModalPopupExtender ID="extPerson" runat="server" TargetControlID="lblPerson"
                                PopupControlID="pnlPerson" DropShadow="true" CancelControlID="lnkClose" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>
Reactions

Post a Comment

10 Comments

  1. Thanx Dear. It helps me a lot.....

    ReplyDelete
  2. Thanks a lot.
    It really helps me.....

    ReplyDelete
  3. Good Work It saves a lot of time to think

    ReplyDelete
  4. this is a very nice article,



    I want to apply autocomplete in gridview (in asp.net3.5 with C#) using jquery and this gridview is within the ajax update panel

    For this i am using method within the ItemTemplate

    $(document).ready(function(){
    $('[id$=txtItemCode]').autocomplete("SearchItem.aspx").result(function (event, data, formatted) {
    if (data) {
    alert('Value: '+ data[1]);

    }
    else {
    $('[id$=txtItemID]').val('-1');
    }
    });
    });

    since in gridview the textbox id is txtItemCode" but

    on browser such as id="ctl00_otherName_101txtItemCode"
    and then for the next row same textbox id is now
    id="ctl00_otherName_102txtItemCode"

    i tried
    1. put this code within the
    2. <%= txtItemCode.ClientID %>
    3. $("*[@id$=theGridId] input[@id$=txtItemCode]")
    4. jQuery.expr[':'].asp = function(elem, i, match) {
    return (elem.id && elem.id.match(match[3] + "$"));
    };
    and $(":asp(txtItemCode)").autocomplete...
    5.$('.txtItemCode').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true })

    but autocomplete for textboxfield in multiple rows does not work in all the cases

    plz help me.

    ReplyDelete
  5. @Amit:If you are using asp.net UpdatePanel then I will suggest you to use autocomplete control.

    ReplyDelete
  6. now i wana pass a value from grid view to modalpopupextender how i do that...?
    thanx

    ReplyDelete
  7. nice example it really helps a lot

    ReplyDelete

Please do not post any spam link in the comment box😊

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)

Close Menu