When you are using basic ASP.NET gridview control in your page with AllowPaging="True" with PageSize="10", then it renders output 10 rows per page. If the total number of records is 25, then total gridview will contain total 3 pages. But the problem comes in the last page, which contains 5 records. As a result when you visit the last page in the gridview then the height of the grid will be lesser than the previous page and the pager row will flicker.
To overcome this issue, we create a custom gridview control by inheriting the basic ASP.NET GridView class to split the original gridview table in three separate tables -
1. Header table displays the header columns.
<table border='1' cellspacing='0' cellpadding='3' class='GridHeader' style='width:100%'> </table>
2. Data rows are displayed within a scrollable div region with fixed height.
<div id='gvwProjects_div' class='GridBody'> </div>
3. Pager table displays BottomPagerRow.
Gridview controls are created in override render() method which is called whenever the postback is performed or when the page is first loaded.
Note you have to explicitly set columns' widths in ItemStyle to HeaderStyle-Width or HeaderStyle if GridView use TemplateField instead of BoundField.
<asp:TemplateField HeaderStyle-Width="65px"> <ItemStyle Width="65px" /> <ItemTemplate> <asp:Label ID="lblDOB" runat="server"></asp:Label> </ItemTemplate> <HeaderTemplate> <asp:LinkButton runat="server" Text="Date of Birth" CommandName="Sort" CommandArgument="DOB"></asp:LinkButton> </HeaderTemplate> </asp:TemplateField>CodeProject: Extended GridView with Fixed Header and Pager