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.jQuery GridView with Fixed Header and Scroll inside Bootstrap Tab<p>Hi,</p> <p>Here I have created sample that will help you out.</p> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;div&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;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css&#34; /&gt; &lt;script src=&#34;Js/ScrollableGridPlugin.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { $(&#39;#&lt;%=GridView2.ClientID %&gt;&#39;).Scrollable({ ScrollHeight: 100, IsInUpdatePanel: true }); }); &lt;/script&gt; &lt;asp:ScriptManager ID=&#34;ScriptManager2&#34; runat=&#34;server&#34;&gt; &lt;/asp:ScriptManager&gt; &lt;div id=&#34;page-wrapper&#34; style=&#34;background-color: white;&#34;&gt; &lt;div style=&#34;padding-top: 0px&#34;&gt; &lt;ul class=&#34;nav nav-tabs&#34; style=&#34;height: 28px; margin-top: 0px;&#34; role=&#34;tablist&#34;&gt; &lt;li style=&#34;float: right; padding-top: 0px; width: 35px;&#34;&gt;&lt;a href=&#34;#Table&#34; role=&#34;tab&#34; data-toggle=&#34;tab&#34; style=&#34;padding-left: 5px; padding-top: 0%; padding-bottom: 0%;&#34; aria-controls=&#34;Table&#34;&gt;&lt;span data-toggle=&#34;tooltip&#34; data-placement=&#34;top&#34; title=&#34;Table&#34;&gt; &lt;i class=&#34;fa fa-table fa-fw&#34;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class=&#34;active&#34; style=&#34;float: right; padding-top: 0px; width: 35px;&#34;&gt;&lt;a href=&#34;#Chart&#34; data-toggle=&#34;tab&#34; style=&#34;padding-left: 6px; padding-top: 0%; padding-bottom: 0%;&#34; aria-controls=&#34;Chart&#34;&gt;&lt;span data-toggle=&#34;tooltip&#34; data-placement=&#34;top&#34; title=&#34;Charts&#34;&gt; &lt;i class=&#34;fa fa-bar-chart-o fa-fw&#34;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class=&#34;tab-content&#34;&gt; &lt;div role=&#34;tabpanel&#34; class=&#34;tab-pane active&#34; id=&#34;Table&#34; style=&#34;width: 300px;&#34;&gt; &lt;asp:UpdatePanel ID=&#34;UpdatePanel2&#34; runat=&#34;server&#34;&gt; &lt;ContentTemplate&gt; &lt;asp:GridView ID=&#34;GridView2&#34; runat=&#34;server&#34; AutoGenerateColumns=&#34;true&#34;&gt; &lt;/asp:GridView&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;/div&gt; &lt;div role=&#34;tabpanel&#34; class=&#34;tab-pane&#34; id=&#34;Chart&#34;&gt; This is Chart Tab &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">C#</span></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[3] { new DataColumn(&#34;Id&#34;, typeof(int)), new DataColumn(&#34;Name&#34;, typeof(string)), new DataColumn(&#34;Country&#34;,typeof(string)) }); dt.Rows.Add(1, &#34;John Hammond&#34;, &#34;United States&#34;); dt.Rows.Add(2, &#34;Mudassar Khan&#34;, &#34;India&#34;); dt.Rows.Add(3, &#34;Suzanne Mathews&#34;, &#34;France&#34;); dt.Rows.Add(4, &#34;Robert Schidner&#34;, &#34;Russia&#34;); GridView2.DataSource = dt; GridView2.DataBind(); } }</pre>https://www.aspforums.net:443/Threads/176556/jQuery-GridView-with-Fixed-Header-and-Scroll-inside-Bootstrap-Tab/https://www.aspforums.net:443/Threads/176556/jQuery-GridView-with-Fixed-Header-and-Scroll-inside-Bootstrap-Tab/Thu, 26 Nov 2015 07:10:26 GMT