Scrollable GridView with Fixed Headers in ASP.Net

Many times the requirement is to GridView that has scrollbars with no pagination. Disabling pagination is not an issue, but there is no provision to add scrollbars to GridView if it exceeds certain height limit.

In such scenario, we will need to take help of traditional HTML and CSS properties of DIV element.

In this Article, I will explain how to make GridView scrollable keeping the headers fixed.

To start with I have used a GridView to display the records from Customers Table of NorthWind Database.

The HTML markup of the GridView in aspx page is shown below

<asp:GridView ID="GridView1" runat="server"

    AutoGenerateColumns = "false" Font-Names = "Arial" ShowHeader = "false"

    Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" >

   <Columns>

    <asp:BoundField ItemStyle-Width = "150px" DataField = "CustomerID" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "City" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "Country" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "PostalCode" />

   </Columns>

</asp:GridView>
 

As you will notice above there are four columns namely

1. CustomerID

2. City

3. Country

4. PostalCode

I have bounded them to the GridView using BoundField.

Also you will notice I have disabled the header by setting it false for the ShowHeader Property of GridView.

Once that is done, run the project and you will notice in the figure below that the GridView is showing all that on a single page since the pagination is not enabled

Now we will need to create a header using HTML table for the GridView for that an easy way is to do a view source of the HTML page and copy the HTML Table tag in order to create the header with the same style as used for the GridView. Refer figure below

Using the GridView table header, I have created the header for the GridView.

 <div style ="background-image:url(nav_03.gif);background-repeat:repeat-x;

height:30px;width:600px; margin:0;padding:0">

<table cellspacing="0" cellpadding = "0" rules="all" border="1" id="tblHeader"

 style="font-family:Arial;font-size:10pt;width:600px;color:white;

 border-collapse:collapse;height:100%;">

    <tr>

       <td style ="width:150px;text-align:center">CustomerID</td>

       <td style ="width:150px;text-align:center">City</td>

       <td style ="width:150px;text-align:center">Country</td>

       <td style ="width:150px;text-align:center">PostalCode</td>

    </tr>

</table>

</div>

I have enclosed the HTML Table in a div keeping the width of both the TABLE and the DIV same as that of GridView. You will notice that the HTML table also has four columns with the width same as that of GridView Bound Columns

The GridView with the Header placed looks as below

 

Now comes the final part that is making the GridView height fixed and setting a scrollbar. For that you will need to enclose the GridView in a DIV having fixed height and width as shown below.

<div style ="height:200px; width:617px; overflow:auto;">

<asp:GridView ID="GridView1" runat="server"

    AutoGenerateColumns = "false" Font-Names = "Arial" ShowHeader = "false"

    Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" >

   <Columns>

    <asp:BoundField ItemStyle-Width = "150px" DataField = "CustomerID" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "City" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "Country" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "PostalCode" />

   </Columns>

</asp:GridView>

</div>

As you will notice above the GridView is now enclosed in a DIV with height 200px and width greater than GridView. The width of the DIV is Greater than the GridView in order to accommodate the vertical scrollbar. Also it cannot be less since then the horizontal scrollbar will become active.

I have set the DIV’s overflow CSS property to auto that is it will show the scrollbar only when the GridView is exceeds the 200px height.

This completes the article. You can experience the scrollable GridView here.

CustomerID	City	Country	PostalCode

ALFKI	Berlin	Germany	12209
ANATR	México D.F.	Mexico	05021
ANTON	México D.F.	Mexico	05023
AROUT	London	UK	WA1 1DP
BERGS	Luleå	Sweden	S-958 22
BLAUS	Mannheim	Germany	68306
BLONP	Strasbourg	France	67000
BOLID	Madrid	Spain	28023
BONAP	Marseille	France	13008
BOTTM	Tsawassen	Canada	T2F 8M4
BSBEV	London	UK	EC2 5NT
CACTU	Buenos Aires	Argentina	1010
CENTC	México D.F.	Mexico	05022
CHOPS	Bern	Switzerland	3012
COMMI	Sao Paulo	Brazil	05432-043
CONSH	London	UK	WX1 6LT
DRACD	Aachen	Germany	52066
DUMON	Nantes	France	44000
EASTC	London	UK	WX3 6FW
ERNSH	Graz	Austria	8010
FAMIA	Sao Paulo	Brazil	05442-030
FISSA	Madrid	Spain	28034
FOLIG	Lille	France	59000
FOLKO	Bräcke	Sweden	S-844 67
FRANK	München	Germany	80805
FRANR	Nantes	France	44000
FRANS	Torino	Italy	10100
FURIB	Lisboa	Portugal	1675
GALED	Barcelona	Spain	08022
GODOS	Sevilla	Spain	41101
GOURL	Campinas	Brazil	04876-786
GREAL	Eugene	USA	97403
GROSR	Caracas	Venezuela	1081
HANAR	Rio de Janeiro	Brazil	05454-876
HILAA	San Cristóbal	Venezuela	5022
HUNGC	Elgin	USA	97827
HUNGO	Cork	Ireland
ISLAT	Cowes	UK	PO31 7PJ
KOENE	Brandenburg	Germany	14776
LACOR	Versailles	France	78000
LAMAI	Toulouse	France	31000
LAUGB	Vancouver	Canada	V3F 2K1
LAZYK	Walla Walla	USA	99362
LEHMS	Frankfurt a.M.	Germany	60528
LETSS	San Francisco	USA	94117
LILAS	Barquisimeto	Venezuela	3508
LINOD	I. de Margarita	Venezuela	4980
LONEP	Portland	USA	97219
MAGAA	Bergamo	Italy	24100
MAISD	Bruxelles	Belgium	B-1180
MEREP	Montréal	Canada	H1J 1C3
MORGK	Leipzig	Germany	04179
NORTS	London	UK	SW7 1RZ
OCEAN	Buenos Aires	Argentina	1010
OLDWO	Anchorage	USA	99508
OTTIK	Köln	Germany	50739
PARIS	Paris	France	75012
PERIC	México D.F.	Mexico	05033
PICCO	Salzburg	Austria	5020
PRINI	Lisboa	Portugal	1756
QUEDE	Rio de Janeiro	Brazil	02389-673
QUEEN	Sao Paulo	Brazil	05487-020
QUICK	Cunewalde	Germany	01307
RANCH	Buenos Aires	Argentina	1010
RATTC	Albuquerque	USA	87110
REGGC	Reggio Emilia	Italy	42100
RICAR	Rio de Janeiro	Brazil	02389-890
RICSU	Genève	Switzerland	1203
ROMEY	Madrid	Spain	28001
SANTG	Stavern	Norway	4110
SAVEA	Boise	USA	83720
SEVES	London	UK	OX15 4NB
SIMOB	Kobenhavn	Denmark	1734
SPECD	Paris	France	75016
SPLIR	Lander	USA	82520
SUPRD	Charleroi	Belgium	B-6000
THEBI	Portland	USA	97201
THECR	Butte	USA	59801
TOMSP	Münster	Germany	44087
TORTU	México D.F.	Mexico	05033
TRADH	Sao Paulo	Brazil	05634-030
TRAIH	Kirkland	USA	98034
VAFFE	Århus	Denmark	8200
VICTE	Lyon	France	69004
VINET	Reims	France	51100
WANDK	Stuttgart	Germany	70563
WARTH	Oulu	Finland	90110
WELLI	Resende	Brazil	08737-363
WHITC	Seattle	USA	98128
WILMK	Helsinki	Finland	21240
WOLZA	Warszawa	Poland	01-012

This same technique applies to DataGrid too you just need to follow the above steps for DataGrid.