GridView Searching Filtering Paging with MasterPage using jQuery Bootstrap DataTable Plugin in ASP.Net

Last Reply on Apr 06, 2017 06:48 AM By dharmendr

Posted on Apr 06, 2017 02:25 AM

I tried to apply bootstrap datatable plugin and it's working but problem is the headers are showing in each rows how to prevent this ?

 

Posted on Apr 06, 2017 02:27 AM

Hi YacharuP,

Check the name that you are given to the button. Else provide complete code with html so that i can check.


Posted on Apr 06, 2017 04:41 AM

Below is my code .aspx code...

Thank You.

<%@ Page Title="District Master" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Master_District.aspx.cs" Inherits="Master_District" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        .ErrorControl {
            background-color: #FBE3E4;
            border: solid 1px Red;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('[id*=grd_dist_master]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                "responsive": true,
                "sPaginationType": "full_numbers"
            });
        });
    </script>
    <script type="text/javascript">
        function WebForm_OnSubmit() {
            if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
                for (var i in Page_Validators) {
                    try {
                        var control = document.getElementById(Page_Validators[i].controltovalidate);
                        if (!Page_Validators[i].isvalid) {
                            control.className = "form-control ErrorControl";
                        } else {
                            control.className = "form-control";
                        }
                    } catch (e) { }
                }
                return false;
            }
            return true;
        }
    </script>
    <script src="images/Functions.js" type="text/javascript"></script>
    <section class="content-header">
        <h1>District</h1>
        <ol class="breadcrumb">
            <li><a href="DashBoard.aspx"><i class="fa fa-dashboard"></i>Home</a></li>
            <li class="active">District Master</li>
        </ol>
    </section>
    <asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
    <link rel="stylesheet" href="images/ProgressBar.css" />
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <ProgressTemplate>
            <div class="modal11">
                <div class="center">
                    <img alt="" src="images/svghourglass.svg" />
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <section class="content" id="emp_registration" runat="server">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">District Master</h3>
                        <asp:Label ID="lbl_id" runat="server" Visible="False">New</asp:Label>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    &nbsp;<asp:TextBox ID="txt_dist_id" runat="server" Visible="False" CssClass="form-control">New</asp:TextBox>
                                    <label>District name<i class="text-red" style="font-size: large">*</i></label>
                                    <asp:TextBox ID="txt_dist_name" runat="server" TabIndex="1" placeholder="District Name" CssClass="form-control" onkeypress="return onlyAlphabets(event, this) && myFunction(this);" MaxLength="40"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="req_vldtr_dname" runat="server" ErrorMessage="Districtname required"
                                        ControlToValidate="txt_dist_name" SetFocusOnError="true" CssClass="pull-right"
                                        ForeColor="Red" Font-Bold="true" Height="26px"></asp:RequiredFieldValidator>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <asp:Button ID="btn_submit" TabIndex="2" CssClass="form-control btn btn-primary"
                                runat="server" Text="Submit" OnClick="btn_submit_Click" Width="100px" />
                            &nbsp;&nbsp;
                            <asp:Button ID="btn_reset" TabIndex="3" CssClass="form-control btn btn-danger"
                                runat="server" Text="Reset" Width="100px" OnClick="btn_reset_Click" />
                        </div>
                    </div>
                </div>
                <div class="box box-success">
                    <div class="box-header with-border">
                        <h3 class="box-title">Registered Districts</h3>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <strong>&nbsp;</strong><asp:TextBox ID="txt_search" runat="server" CssClass="form-control" placeholder="Search Here"></asp:TextBox>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <br />
                                    <asp:Button ID="btn_search" runat="server" OnClick="btn_search_Click" Width="100" Text="Search" ValidationGroup="*" CssClass="form-control btn btn-success" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer"></div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box-body">
                                <asp:Label ID="lbl_message" runat="server" Text="" Font-Bold="true" ForeColor="Red"></asp:Label>
                                <asp:GridView ID="grd_dist_master" runat="server" GridLines="None" CssClass="table table-striped table-hover table-responsive" Width="100%" OnRowCommand="grd_dist_master_RowCommand" AutoGenerateColumns="False" OnPageIndexChanging="grd_dist_master_PageIndexChanging" DataKeyNames="district_id" AutoGenerateSelectButton="True" OnSelectedIndexChanged="grd_dist_master_SelectedIndexChanged">
                                    <Columns>
                                        <asp:BoundField DataField="district_name" HeaderText="District Name" />
                                        <asp:TemplateField HeaderText="Edit" ShowHeader="False">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="false" CommandName="edt" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" Width="50px" CssClass="form-control btn btn-primary"><i class="fa fa-edit"></i></asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Delete" ShowHeader="False">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="false" CommandName="dlt" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" OnClientClick="return confirm('Are you sure want to delete record?')" Width="50px" CssClass="form-control btn btn-danger"><i class="fa fa-close"></i></asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btn_submit" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btn_reset" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </section>
</asp:Content>

 



Posted on Apr 06, 2017 06:48 AM Modified on on Apr 06, 2017 06:54 AM
YacharuP says:
<script type="text/javascript">
        $(function () {
            $('[id*=grd_dist_master]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                "responsive": true,
                "sPaginationType": "full_numbers"
            });
        });
    </script>

 Change the above with the below.

<script type="text/javascript">
    $(function () {
        $('[id$=grd_dist_master]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
            "responsive": true,
            "sPaginationType": "full_numbers"
        });
    });
</script>

As you are using master page find id that ends with grd_dist_master.