ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Filter ASP.Net GridView records using TextBox in HeaderRow with Fixed header in jQuery<p>Hey <a class="username" rel="Amol111"> Amol111</a>,</p> <p>If you want to responsive features with fixed header, searching and scrollbar so instead of gridview use repeater and apply on that jquery Datatable plugin.</p> <p>Please refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { $(&#39;#example thead th&#39;).each(function () { var title = $(&#39;#example thead th&#39;).eq($(this).index()).text(); $(this).find(&#34;.filter-wrapper&#34;).html(&#39;&lt;input type=&#34;text&#34; class=&#34;filter form-control&#34; placeholder=&#34;&#39; + title + &#39;&#34; /&gt;&#39;); }); var otable = $(&#39;#example&#39;).DataTable({ &#34;bPaginate&#34;: false, &#34;sScrollY&#34;: &#34;200&#34; }); // Apply the search otable.columns().every(function () { var that = this; $(&#39;input&#39;, this.header()).on(&#39;keyup change click&#39;, function (e) { e.stopPropagation(); if (that.search() !== this.value) { that.search(this.value).draw(); } }); }); }); &lt;/script&gt; &lt;asp:Repeater ID=&#34;rptCustomers&#34; runat=&#34;server&#34; ClientIDMode=&#34;Static&#34;&gt; &lt;HeaderTemplate&gt; &lt;table id=&#34;example&#34; class=&#34;display&#34; cellspacing=&#34;0&#34; width=&#34;100%&#34;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt; Id&lt;div class=&#34;filter-wrapper&#34;&gt; &lt;/th&gt; &lt;th&gt; Name&lt;div class=&#34;filter-wrapper&#34;&gt; &lt;/th&gt; &lt;th&gt; Country&lt;div class=&#34;filter-wrapper&#34;&gt; &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/HeaderTemplate&gt; &lt;ItemTemplate&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:Label ID=&#34;lblCustomerId&#34; runat=&#34;server&#34; Text=&#39;&lt;%# Eval(&#34;CustomerId&#34;) %&gt;&#39; /&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:Label ID=&#34;lblContactName&#34; runat=&#34;server&#34; Text=&#39;&lt;%# Eval(&#34;ContactName&#34;) %&gt;&#39; /&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:Label ID=&#34;lblCountry&#34; runat=&#34;server&#34; Text=&#39;&lt;%# Eval(&#34;Country&#34;) %&gt;&#39; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/ItemTemplate&gt; &lt;FooterTemplate&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/FooterTemplate&gt; &lt;/asp:Repeater&gt;</pre> <p><span style="text-decoration: underline;"><strong>Namespaces</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data; using System.Configuration; using System.Data.SqlClient;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data Imports System.Data.SqlClient</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataTable dt = GetData(); rptCustomers.DataSource = dt; rptCustomers.DataBind(); } } private static DataTable GetData() { string conString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; string query = &#34;SELECT CustomerID,ContactName,Country FROM Customers&#34;; SqlCommand cmd = new SqlCommand(query); using (SqlConnection con = new SqlConnection(conString)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.Connection = con; sda.SelectCommand = cmd; using (DataTable dt = new DataTable()) { sda.Fill(dt); return dt; } } } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim dt As DataTable = GetData() rptCustomers.DataSource = dt rptCustomers.DataBind() End If End Sub Private Shared Function GetData() As DataTable Dim conString As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim query As String = &#34;SELECT CustomerID,ContactName,Country FROM Customers&#34; Dim cmd As SqlCommand = New SqlCommand(query) Using con As SqlConnection = New SqlConnection(conString) Using sda As SqlDataAdapter = New SqlDataAdapter() cmd.Connection = con sda.SelectCommand = cmd Using dt As DataTable = New DataTable() sda.Fill(dt) Return dt End Using End Using End Using End Function</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><img src="https://imgur.com/0akjVZk.gif" alt="" width="296" height="419" /></p>https://www.aspforums.net:443/Threads/106779/Filter-ASPNet-GridView-records-using-TextBox-in-HeaderRow-with-Fixed-header-in-jQuery/https://www.aspforums.net:443/Threads/106779/Filter-ASPNet-GridView-records-using-TextBox-in-HeaderRow-with-Fixed-header-in-jQuery/Fri, 28 Dec 2018 01:06:08 GMT