locked
opening modalpopup with gridview delete RRS feed

  • Question

  • User351619809 posted

    I am trying to open a modal popup window when user clicks on the delete image button. when I click on the delete image button, I want the user to go to grdShoppingCart_RowDeleting when Ok is clicked. I am not sure what am I doing wrong. Below is my gridview code:

    <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
                <ContentTemplate>
                    
                <asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5"  GridLines="None"  OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting"  >
                    <Columns>
                        
                        
                         <!-- other clumns here-->
                        
                         <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
                            <ItemTemplate>
                                 <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"     ToolTip="Click To Delete" AlternateText="Click To delete"   CommandName="Delete"/>                            
                                <asp:Panel ID="pnlPopUp" runat="server" Style="display: none" CssClass="modalPopup">
                                    <asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
                                        <div>
                                           <p>Are you sure you want to delete this item?</p>
                                        </div>
                                    </asp:Panel>
                                       <div>
                                           <p style="text-align: center;">
                                                <asp:Button ID="OkButton" runat="server" Text="Yes" />
                                                <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                                          </p>
                                      </div>
                                </asp:Panel>
                            
                                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
                                                    TargetControlID="imgbtnDelete"
                                                    PopupControlID="pnlPopUp"
                                                    BackgroundCssClass="modalBackground"
                                                    CancelControlID="CancelButton"
                                                    DropShadow="true"
                                                    PopupDragHandleControlID="pnlDragPopUp" />
                          </ItemTemplate>
                            </asp:TemplateField>
                    </Columns>
    
                </asp:GridView>
                    </ContentTemplate>
               </asp:UpdatePanel>
    

    Code behind:

       protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
            {
                int cartId = (int)grdShoppingCart.DataKeys[e.RowIndex]["CartID"];
                ShoppingCartData scd = new ShoppingCartData();
                scd.DeleteShoppingCartData(cartId);
            }
    Wednesday, December 16, 2020 10:21 PM

Answers

  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    Putting the modal inside the gridview is a good implementation. The only problem is that you are still not passing any parameter to tell the server which row should be deleted.

    You could refer to below demo to see how to pass the "CartID" to the server side and trigger the "RowDeleting" event. The image button is just used to activate the modal.

    .aspx page:

     <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always" >
                    <ContentTemplate>
    
                        <asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
                            <Columns>
    
    
                                <asp:BoundField HeaderText="Cart ID" DataField="CartID" />
                                <asp:BoundField HeaderText="Name" DataField="Name" />
    
                                <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete" AlternateText="Click To delete"  />
                                        <asp:Panel ID="pnlPopUp" runat="server" Style="display: none" CssClass="modalPopup">
                                            <asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move; background-color: #DDDDDD; border: solid 1px Gray; color: Black">
                                                <div>
                                                    <p>Are you sure you want to delete this item?</p>
                                                </div>
                                            </asp:Panel>
                                            <div>
                                                <p style="text-align: center;">
                                                    <asp:Button ID="OkButton" runat="server" Text="Yes" CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/>
                                                    <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                                                </p>
                                            </div>
                                        </asp:Panel>
    
    
                                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
                                            TargetControlID="imgbtnDelete"
                                            PopupControlID="pnlPopUp"
                                            BackgroundCssClass="modalBackground"
                                            CancelControlID="CancelButton"
                                            DropShadow="true"
                                            PopupDragHandleControlID="pnlDragPopUp" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
    
                        </asp:GridView>
    
                         <asp:Label ID="label1" runat="server"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
                
            </div>
        </form>

    Code behind:

     // Simulation of the data
            private static DataTable _gridviewDT;
            public static DataTable GridviewDT
            {
                get
                {
                    if (_gridviewDT is null)
                    {
                        _gridviewDT = new DataTable();
    
                        _gridviewDT.Columns.Add("CartID", typeof(int));
                        _gridviewDT.Columns.Add("Name", typeof(string));
    
                        _gridviewDT.Rows.Add(1, "name1");
                        _gridviewDT.Rows.Add(2, "name2");
                        _gridviewDT.Rows.Add(3, "name3");
                        _gridviewDT.Rows.Add(4, "name4");
    
                    }
    
                    return _gridviewDT;
                }
                set
                {
                    _gridviewDT = value;
                }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
    
            protected void BindGridView()
            {
                grdShoppingCart.DataSource = GridviewDT;
                grdShoppingCart.DataBind();
            }
    
            protected void grdShoppingCart_RowDataBound(object sender, GridViewRowEventArgs e)
            {
    
            }
    
            protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
            {
    
                // Get current grid view row
                GridViewRow row = grdShoppingCart.Rows[e.RowIndex];
    
                // Get command argument from button, also you could use another approach to get parameters
                Button btn = (Button)row.FindControl("OkButton");
    
                int cartId = Convert.ToInt32(btn.CommandArgument);
    
                label1.Text = "The row is going to be deleted: " + cartId;
            }

    Demo:

     

    Note that the UpdatePanel control is only doing partial postback. If you want to trigger a whole postback, you should set "<asp:PostBackTrigger>" within the UpdatePanel control.

    Reference: https://stackoverflow.com/a/2545541/12871232

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 17, 2020 3:49 AM

All replies

  • User475983607 posted

    This design has the same problem as your other thread.  Your design does a partial post and overwrite the modal.  

    https://forums.asp.net/p/2172990/6327424.aspx?calling+jquery+UI+dialog+box+from+Gridview+delete

    Wednesday, December 16, 2020 10:57 PM
  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    Putting the modal inside the gridview is a good implementation. The only problem is that you are still not passing any parameter to tell the server which row should be deleted.

    You could refer to below demo to see how to pass the "CartID" to the server side and trigger the "RowDeleting" event. The image button is just used to activate the modal.

    .aspx page:

     <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always" >
                    <ContentTemplate>
    
                        <asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
                            <Columns>
    
    
                                <asp:BoundField HeaderText="Cart ID" DataField="CartID" />
                                <asp:BoundField HeaderText="Name" DataField="Name" />
    
                                <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete" AlternateText="Click To delete"  />
                                        <asp:Panel ID="pnlPopUp" runat="server" Style="display: none" CssClass="modalPopup">
                                            <asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move; background-color: #DDDDDD; border: solid 1px Gray; color: Black">
                                                <div>
                                                    <p>Are you sure you want to delete this item?</p>
                                                </div>
                                            </asp:Panel>
                                            <div>
                                                <p style="text-align: center;">
                                                    <asp:Button ID="OkButton" runat="server" Text="Yes" CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/>
                                                    <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                                                </p>
                                            </div>
                                        </asp:Panel>
    
    
                                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
                                            TargetControlID="imgbtnDelete"
                                            PopupControlID="pnlPopUp"
                                            BackgroundCssClass="modalBackground"
                                            CancelControlID="CancelButton"
                                            DropShadow="true"
                                            PopupDragHandleControlID="pnlDragPopUp" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
    
                        </asp:GridView>
    
                         <asp:Label ID="label1" runat="server"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
                
            </div>
        </form>

    Code behind:

     // Simulation of the data
            private static DataTable _gridviewDT;
            public static DataTable GridviewDT
            {
                get
                {
                    if (_gridviewDT is null)
                    {
                        _gridviewDT = new DataTable();
    
                        _gridviewDT.Columns.Add("CartID", typeof(int));
                        _gridviewDT.Columns.Add("Name", typeof(string));
    
                        _gridviewDT.Rows.Add(1, "name1");
                        _gridviewDT.Rows.Add(2, "name2");
                        _gridviewDT.Rows.Add(3, "name3");
                        _gridviewDT.Rows.Add(4, "name4");
    
                    }
    
                    return _gridviewDT;
                }
                set
                {
                    _gridviewDT = value;
                }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
    
            protected void BindGridView()
            {
                grdShoppingCart.DataSource = GridviewDT;
                grdShoppingCart.DataBind();
            }
    
            protected void grdShoppingCart_RowDataBound(object sender, GridViewRowEventArgs e)
            {
    
            }
    
            protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
            {
    
                // Get current grid view row
                GridViewRow row = grdShoppingCart.Rows[e.RowIndex];
    
                // Get command argument from button, also you could use another approach to get parameters
                Button btn = (Button)row.FindControl("OkButton");
    
                int cartId = Convert.ToInt32(btn.CommandArgument);
    
                label1.Text = "The row is going to be deleted: " + cartId;
            }

    Demo:

     

    Note that the UpdatePanel control is only doing partial postback. If you want to trigger a whole postback, you should set "<asp:PostBackTrigger>" within the UpdatePanel control.

    Reference: https://stackoverflow.com/a/2545541/12871232

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 17, 2020 3:49 AM