Aspdotnetcodebook

Thursday, February 21, 2008

How To Open Modal PopUp Inside Gridview

<%@ 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>

10 comments:

Sahil Lodha said...: Thanx Dear. It helps me a lot.....; July 20, 2009 at 3:10 AM
Sachin said...: Thanks a lot.
It really helps me.....; October 15, 2009 at 5:39 AM
Saurabh Bhatnagar said...: Good Work It saves a lot of time to think; December 7, 2009 at 10:50 PM
Saurabh Bhatnagar said...: Thanks

You saved a lot of time; December 7, 2009 at 10:51 PM
Amit said...: 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.; February 3, 2011 at 1:50 AM
santosh said...: @Amit:If you are using asp.net UpdatePanel then I will suggest you to use autocomplete control.; February 3, 2011 at 2:27 AM
Anonymous said...: now i wana pass a value from grid view to modalpopupextender how i do that...?
thanx; May 31, 2011 at 4:59 AM
kapil said...: nice example it really helps a lot; July 7, 2011 at 10:14 AM
sqltutorial said...: thanks to share dot net tricky; August 4, 2011 at 7:11 PM
Sunny Chauhan said...: ..Yup, it Works ?.; February 23, 2012 at 11:14 PM