locked
ModelPopupExtender => gives error - Edit button not found RRS feed

  • Question

  • User856517640 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

    Friday, February 13, 2015 11:11 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 13, 2015 11:19 PM
  • User1918509225 posted

    Hi pawarajit04,

    It seems that you just need to create link button named "Edit" in TemplatedField like below:

    <asp:TemplateField ItemStyle-Width = "30px" HeaderText = "CustomerID">
    
       <ItemTemplate>
    
           <asp:LinkButton ID="lnkEdit" runat="server" Text = "Edit" OnClick = "Edit"></asp:LinkButton>
    
       </ItemTemplate>
    
    </asp:TemplateField>

    Here is a working demo which you can refer :

    http://www.aspsnippets.com/Articles/Add-Edit-Update-Records-in-GridView-using-Modal-Popup-in-ASP.Net.aspx

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 16, 2015 1:09 AM

All replies

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 13, 2015 11:19 PM
  • User1918509225 posted

    Hi pawarajit04,

    It seems that you just need to create link button named "Edit" in TemplatedField like below:

    <asp:TemplateField ItemStyle-Width = "30px" HeaderText = "CustomerID">
    
       <ItemTemplate>
    
           <asp:LinkButton ID="lnkEdit" runat="server" Text = "Edit" OnClick = "Edit"></asp:LinkButton>
    
       </ItemTemplate>
    
    </asp:TemplateField>

    Here is a working demo which you can refer :

    http://www.aspsnippets.com/Articles/Add-Edit-Update-Records-in-GridView-using-Modal-Popup-in-ASP.Net.aspx

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 16, 2015 1:09 AM