locked
After clicking Save Data shows in normal Gridview not as Jquery Datatable RRS feed

  • Question

  • User-1499457942 posted

    Hi

       I have below code . When Page Opens it shows in Jquery DataTable format . When i click on Save then it shows in Normal Gridview Format. I want that it should show same as in Jquery Datatable when i opens Page. 

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <div class="table-responsive">
                        
                        <asp:ScriptManager ID="ScriptManager" runat="server" />
                        <asp:UpdatePanel ID="upnlUsers" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                            <ContentTemplate> 
                                <div class="form-group row">
                                    <label for="lblInflator" class="col-sm-1 col-form-label">Inflator :</label>
                                    <div class="col-sm-2">
                                        <asp:TextBox ID="txtInflator" CssClass="form-control" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfv1" CssClass="text-danger" runat="server" ErrorMessage="This field is Required !" ControlToValidate="txtInflator"></asp:RequiredFieldValidator>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="ltxtDeflator" class="col-sm-1 col-form-label">Deflator :</label>
                                    <div class="col-sm-2">
                                        <asp:TextBox ID="txtDeflator" CssClass="form-control" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfv2" CssClass="text-danger" runat="server" ErrorMessage="This field is Required !" ControlToValidate="txtDeflator"></asp:RequiredFieldValidator>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-1"></div>
                                    <div class="col-sm-2">
                                        <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" Text=" Save " OnClick="btnInsert_Click" ></asp:Button>
                                    </div>
                                </div>
                                </br>
                                <asp:GridView ID="gvwInflator" runat="server" OnPreRender="gvwInflator_PreRender"  AutoGenerateColumns="false" AllowSorting="true" Font-Size="9pt"
                                    BackColor="LightGoldenrodYellow" BorderColor="Tan"  ForeColor="Black" GridLines="none"
                                    CssClass="table table-bordered table-striped" ClientIDMode="Static" BorderWidth="1px" 
                                    CellPadding="3" CellSpacing="2" BorderStyle="None"  HeaderStyle-HorizontalAlign="Center" 
                                    EmptyDataText="No Records Found!" EmptyDataRowStyle-ForeColor="Red" EmptyDataRowStyle-CssClass ="gvEmpty" >
                                    <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                    <Columns>
                                        <asp:BoundField DataField="EntryNo" HeaderText="EntryNo" InsertVisible="False" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
                                        <asp:BoundField HeaderText="Inflator" DataField="Inflator" />
                                        <asp:BoundField HeaderText="Deflator" DataField="Deflator" />
                                        <asp:TemplateField HeaderText="Action">
                                            <ItemTemplate>
                                               <asp:ImageButton ID="ibtnDelete" runat="server" imageUrl="/Images/btn-delete.jpg"
                                                  OnClientClick="javascript:return confirm('Do you want to delete it?');" OnClick="ibtnDelete_Click" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnInsert" EventName="Click" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>
        </div>
    </asp:Content>
    
    
    
     protected void btnInsert_Click(object sender, EventArgs e)
            {
                using (SqlConnection con = new SqlConnection(CommonFunction.connectionString))
                {
                    con.Open();
                    using (SqlCommand cmd = new SqlCommand())
                    {
                        cmd.CommandText = "INSERT INTO tbl_I (Inflator,Deflator) VALUES (@Inflator,@Deflator)";
                        cmd.Connection = con;
                        cmd.CommandType = CommandType.Text;
                        cmd.Parameters.AddWithValue("@Inflator", txtInflator.Text);
                        cmd.Parameters.AddWithValue("@Deflator", txtDeflator.Text);
                        cmd.ExecuteNonQuery();
                        con.Close();
                    }
                }
                FillGrid();
                
            }

    Thanks

    Monday, August 13, 2018 6:43 AM

All replies

  • User-1171043462 posted

    You will need to re-apply the jQuery DataTable.

    jQuery DataTable plugin not working after ASP.Net UpdatePanel PostBack

    <link rel="Stylesheet" type="text/css" href="css/demos.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.dataTables.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.dataTable').dataTable();
            });
        //On UpdatePanel Refresh
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                   $('.dataTable').dataTable();
                }
            });
        };
        </script> 
    

     

    Monday, August 13, 2018 8:34 AM
  • User-893317190 posted

    Hi JagjitSingh,

    Just as mudassarkhan has said, you should re-apply the jquery DataTable.
    After you click the btnInsert button, the server will give back a new gridview which has original css style. So you should re-apply jquery DataTable to give the new gridview  jquery DataTable’s css style.
    You could also use  ScriptManager  to help you  run js code after the updatepanel returns data.

    Below is my code.

    <form id="form1" runat="server">
           <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <div class="table-responsive">
                        
                        <asp:ScriptManager ID="ScriptManager" runat="server" />
                        <asp:UpdatePanel ID="upnlUsers" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                            <ContentTemplate> 
                                <div class="form-group row">
                                    <label for="lblInflator" class="col-sm-1 col-form-label">Inflator :</label>
                                    <div class="col-sm-2">
                                        <asp:TextBox ID="txtInflator" CssClass="form-control" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfv1" CssClass="text-danger" runat="server" ErrorMessage="This field is Required !" ControlToValidate="txtInflator"></asp:RequiredFieldValidator>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="ltxtDeflator" class="col-sm-1 col-form-label">Deflator :</label>
                                    <div class="col-sm-2">
                                        <asp:TextBox ID="txtDeflator" CssClass="form-control" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfv2" CssClass="text-danger" runat="server" ErrorMessage="This field is Required !" ControlToValidate="txtDeflator"></asp:RequiredFieldValidator>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-1"></div>
                                    <div class="col-sm-2">
                                        <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" Text=" Save " OnClick="btnInsert_Click" ></asp:Button>
                                    </div>
                                </div>
                                </br>
                                <asp:GridView ID="gvwInflator" runat="server"   AutoGenerateColumns="false" AllowSorting="true" Font-Size="9pt"
                                    BackColor="LightGoldenrodYellow" BorderColor="Tan"  ForeColor="Black" GridLines="none"
                                    CssClass="table table-bordered table-striped" ClientIDMode="Static" BorderWidth="1px" 
                                    CellPadding="3" CellSpacing="2" BorderStyle="None"  HeaderStyle-HorizontalAlign="Center" 
                                    EmptyDataText="No Records Found!" EmptyDataRowStyle-ForeColor="Red" EmptyDataRowStyle-CssClass ="gvEmpty" >
                                    <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                    <Columns>
                                        <asp:BoundField DataField="SID" HeaderText="SID" InsertVisible="False" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
                                        <asp:BoundField HeaderText="Inflator" DataField="Name" />
                                        <asp:BoundField HeaderText="Deflator" DataField="City" />
                                        <asp:TemplateField HeaderText="Action">
                                            <ItemTemplate>
                                               <asp:ImageButton ID="ibtnDelete" runat="server" imageUrl="~/images/icons/cut.png"
                                                  OnClientClick="javascript:return confirm('Do you want to delete it?');"  />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnInsert" EventName="Click" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>
        </div>
    
        </form>
        <script>
            $(function () {
                $("<thead></thead>").append($("#gvwInflator tr:first")).prependTo($("#gvwInflator"));
                $('#gvwInflator').dataTable();
    
        </script>
    

    Code behind.

    protected void btnInsert_Click(object sender, EventArgs e)
            {
                using (SqlConnection con = new SqlConnection(constr))
                {
                    con.Open();
                    using (SqlCommand cmd = new SqlCommand())
                    {
                        cmd.CommandText = "INSERT INTO suppliers (Name,City) VALUES (@Name,@City)";
                        cmd.Connection = con;
                        cmd.CommandType = CommandType.Text;
                        cmd.Parameters.AddWithValue("Name", txtInflator.Text);
                        cmd.Parameters.AddWithValue("City", txtDeflator.Text);
                        cmd.ExecuteNonQuery();
                        con.Close();
                    }
                }
                txtInflator.Text = "";
                txtDeflator.Text = "";
                FillGrid();
                // you only need to write your js code as the third parameter of the method
                // myscript is the name the your js code
                ScriptManager.RegisterStartupScript(this, this.GetType(), "myScript", " $(\" <thead ></thead > \").append($(\"#gvwInflator tr:first\")).prependTo($(\"#gvwInflator\"));"
             + "   $('#gvwInflator').dataTable(); ", true);
            }
    
    

    The result.

    Best regards ,

    Ackerly Xu

    Tuesday, August 14, 2018 5:26 AM