User2103319870 posted
i creatd 1 GridView and in that i create Edit button by <TemplateField> , i want functionality like when we click on that Edit button which in inside GridView then a Popup window comes and in that we Edit the Details, but i unable
to find that Edit button
Please try with the below implementation.
GridView Markup:
You need declare a template column in your gridview and add a link button. User can click on link button to see the details of descriptions.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
View Details
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkViewDetails" runat="server" CommandArgument='<%# Eval("Area")%>'
OnClick="ViewDetails" Text="View Details" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="District" HeaderText="District" />
</Columns>
</asp:GridView>
Then you need to declare panel control which will act as content place holder for controls like button, label etc. I have used just label for sample purpose but you can use as many control as per your need.
<asp:Panel ID="pnlGridViewDetails" runat="server" Width="200px" Height="200px" Style="display: none;">
<%--Add other controls here--%>
<asp:Label Font-Bold="true" ID="Label4" runat="server" Text="Customer Details"></asp:Label>
</asp:Panel>
Last add Ajax control toolkit's ModalPopup extender to page
<asp:Button ID="btnDummy" runat="server" Style="display: none;" />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="GridViewDetails" runat="server" TargetControlID="btnDummy"
PopupControlID="pnlGridViewDetails" BackgroundCssClass="modalBackground" />
Code Behind Code
Add the below lines of code to link button click event
protected void ViewDetails(object sender, EventArgs e)
{
//Grab the selected row
GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent;
//Get the description column value and assign it to label in panel
Label4.Text = "Selected Details :" + row.Cells[2].Text;
//Show the modal popup extender
GridViewDetails.Show();
}
Above code will get the selected row and get the column value.
Change the index of column as per your design
Complete Source Code:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
View Details
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkViewDetails" runat="server" CommandArgument='<%# Eval("Area")%>'
OnClick="ViewDetails" Text="View Details" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="District" HeaderText="District" />
</Columns>
</asp:GridView>
<asp:Panel ID="pnlGridViewDetails" runat="server" Width="200px" Height="200px" Style="display: none;">
<%--Add other controls here--%>
<asp:Label Font-Bold="true" ID="Label4" runat="server" Text="Customer Details"></asp:Label>
</asp:Panel>
<asp:Button ID="btnDummy" runat="server" Style="display: none;" />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="GridViewDetails" runat="server" TargetControlID="btnDummy"
PopupControlID="pnlGridViewDetails" BackgroundCssClass="modalBackground" />
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind();
}
}
public void Bind()
{
this.GridView1.DataSource = Get_Arealist();
this.GridView1.DataBind();
}
public DataTable Get_Arealist()
{
DataTable dt = new DataTable();
DataRow dr;
string Name = "Area_1,Area_2,Area_3,Area_4,Area_5";
string Dis = "District_1,District_1,District_1,District_3,Area_1";
string ID = "1,2,3,4,5";
string[] list1 = Name.Split(',');
string[] list2 = Dis.Split(',');
string[] list3 = ID.Split(',');
dt.Columns.Add(new DataColumn("Area"));
dt.Columns.Add(new DataColumn("District"));
dt.Columns.Add(new DataColumn("ID"));
for (int i = 0; i < list1.Length; i++)
{
dr = dt.NewRow();
dr["Area"] = list1[i];
dr["District"] = list2[i];
dr["ID"] = list3[i];
dt.Rows.Add(dr);
}
return dt;
}
protected void ViewDetails(object sender, EventArgs e)
{
//Grab the selected row
GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent;
//Get the description column value and assign it to label in panel
Label4.Text = "Selected Details :" + row.Cells[2].Text;
//Show the modal popup extender
GridViewDetails.Show();
}
If you dont have AjaxControlToolkit installed in your system. You may need to download toolkit from below link
