delete data from asp:GridView use modal-dialog - Twitter bootstrap

AlHanashi
June 13, 2017
245 views
0 votes
2 Answers

I try to delete data that display in GridView after confirm it using twitter bootstrap. my gridview with modal-dialog as follow

<div class="panel  panel-default">
    <div class="panel-heading">
        <h2 class="panel-title clearfix ">
            <div>
                <b>Name</b>
                <div style="float: left;">
                </div>

            </div>
        </h2>
    </div>




    <div class="panel-body">
        <div>
            <asp:GridView ID="gridView" DataKeyNames="Id" runat="server"
                CssClass="table table-striped table-bordered table-hove"
                AutoGenerateColumns="False" HeaderStyle-Font-Bold="true"
                OnRowEditing="gridView_RowEditing"
                OnRowCancelingEdit="gridView_RowCancelingEdit"
                OnRowUpdating="gridView_RowUpdating"
                OnRowDeleting="gridView_RowDeleting"
                OnRowCommand="gridView_RowCommand">
                <Columns>
                    <asp:TemplateField HeaderText="ID" ControlStyle-Width="0px">
                        <ItemTemplate>
                            <asp:Label ID="txtid" runat="server" Text='<%#Eval("Id") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblid" runat="server" Width="40px" Text='<%#Eval("Id") %>' />
                        </EditItemTemplate>
                        <FooterTemplate>
                        </FooterTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Name">
                        <ItemTemplate>
                            <asp:Label ID="lblLName" runat="server" Text='<%#Eval("Location_name") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtLName" CssClass="form-control" runat="server" Text='<%#Eval("Location_name") %>' />
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="LocName" AutoCompleteType="Disabled" runat="server" />
                            <asp:RequiredFieldValidator ID="ReqBrName" runat="server" ControlToValidate="BrName" Display="Dynamic" CssClass="valid" ErrorMessage="?" ValidationGroup="validaiton" />
                        </FooterTemplate>
                    </asp:TemplateField>





                    <asp:TemplateField HeaderText="Options">
                        <ItemTemplate>
                            <asp:LinkButton ID="lbEdit" CssClass="btn btn-default btn-sm " runat="server" CommandName="Edit">                                                            
                                                              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit</asp:LinkButton>

                            <asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()">                                                            
                                                              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>




                            <%-- Delete Form --%>
                            <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal" aria-hidden="true"></button>
                                            <h4 class="modal-title" id="">Delete the data</h4>
                                        </div>



                                        <div class="modal-body">
                                            Are You sure?
                                            <asp:Label ID="lblLName1" runat="server" Text='<%#Eval("id") %>' />
                                            <br />

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default glyphicon glyphicon-remove" data-dismiss="modal">Cancel</button>
                                            <asp:LinkButton ID="lbde" CssClass="btn btn-default btn-sm " runat="server" CommandName="Delete">                                                            
                                                              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                                            </asp:LinkButton>
                                        </div>





                                    </div>
                                </div>
                            </div>
                            <%-- Delete Form --%>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:LinkButton ID="lbUpdate" CssClass="btn btn-default btn-sm " runat="server" CommandName="Update">                                                            
                                                              <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Update
                            </asp:LinkButton>

                            <asp:LinkButton ID="lbCancel" CssClass="btn btn-default btn-sm " runat="server" CommandName="Cancel">                                                            
                                                              <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> Cancel
                            </asp:LinkButton>



                        </EditItemTemplate>
                        <FooterTemplate>
                        </FooterTemplate>
                    </asp:TemplateField>

                </Columns>

                <HeaderStyle Font-Bold="True"></HeaderStyle>
            </asp:GridView>

        </div>
    </div>

</div>

and my JavaScript function is

<script>

        function ConfirmDelete() {
            $('#DeleteModal').modal()
            return false;
        }
    </script>

so when I try to delete the record by using the popup model it’s not working, the model will work fine but the data in lblLName1 allows will be the first record ID so when I confirm the first record will be deleted

could anyone helps me in that??

Answers

Thanks everyone

after trying several ways I found the solution.
first, change the calling button from

  <asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()">  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>

<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm" runat="server" CommandArgument='<%#Eval("Id")%>'
                                OnCommand="lbDelete_Command" CommandName='<%#Eval("Location_name")%>'>                                                            
                                                              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> حذف</asp:LinkButton>

and in c# call function under lbDelete_Command

protected void lbDelete_Command(object sender, CommandEventArgs e)
    {
        foreach (GridViewRow row in gridView.Rows)
        {

            HiddenField hf_id = row.FindControl("hf_Del_ID") as HiddenField;
            Label l_name = row.FindControl("lb_Del_Name") as Label;
            l_name.Text = e.CommandName.ToString();
            hf_id.Value = e.CommandArgument.ToString();

        }

        ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { ConfirmDelete(); });", true);
    }

and I edit the fields under modal-body division like follow

<div class="modal-body">
<asp:HiddenField ID="hf_Del_ID" runat="server" />
Are You sure?
<h4><asp:Label ID="lb_Del_Name" runat="server"/></h4>
</div>

I use the hidden field hf_Del_ID for delete purpose
and the label lb_Del_Name for display only

and also the deleting SQL in C# as follow

 try
    {
        HiddenField hf_id = (HiddenField)gridView.Rows[e.RowIndex].FindControl("hf_Del_ID");

        con.Open();
        SqlCommand cmd = new SqlCommand("delete from TABLE_NAME where Id=" + hf_id.Value, con);
        int result = cmd.ExecuteNonQuery();
        con.Close();
        if (result == 1)
        {
            loadData();

            lbl_msgDet.ForeColor = Color.Red;
            lbl_msgDet.Text = " delete done";
        }
    }
    catch (SqlException ex)
    {
        lbl_msgDet.ForeColor = Color.Red;
        lbl_msgDet.Text = (String)GetGlobalResourceObject("Err_msg", "MsgDeleteErr") + "<br/>" + ex.Message;
    }
    ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { CallMsg(); });", true);

I hope the solution helps

Thanks

this works for me… very easy

<asp:DataGrid runat="server" ID="dgMyGrid"  ValidationGroup="grdMyGrid" OnDeleteCommand="dgRel_DeleteCommand" AutoGenerateColumns="false">
            <Columns>
                 <asp:TemplateColumn HeaderText="FirstColumn">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="FirstColumnID" Text='<%# getFirstColumnName(Eval("FirstColumn").ToString())%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateColumn>


                <asp:TemplateColumn>
                    <ItemTemplate>
                       <div class="modal" id="myModal<%#Eval("MyIDToBound").ToString()%>">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Confirm</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p id="modal-help-text">Are you sure to remove item?</p>
                                    </div>
                                    <div class="modal-footer">
                                       <asp:Button   runat="server" ID="btnDelete" CssClass="btn btn-secondary" CommandName="Delete" Text="Yes"/>
                                        <button type="button" class="btn btn-secondary cancel"  data-dismiss="modal">No</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button"  data-toggle="modal" data-target="#myModal<%#Eval("MyIDToBound").ToString()%>">
                            <asp:Label runat="server" ID="lblDeleteButton" Text="Delete"></asp:Label>
                            </button>

                    </ItemTemplate>
                </asp:TemplateColumn>
            </Columns>
        </asp:DataGrid>

Please signup or login to give your own answer.

Click here to cancel reply.

delete data from asp:GridView use modal-dialog – Twitter bootstrap

Answers