Pages

Thursday, May 24, 2012

Scrollable GridView with Fixed Headers in ASP.Net

Abstract: Here Mudassar Ahmed Khan describes how to create your own Gridview with scrollbars to scroll through the records. 



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


Gridview with pagination disabled


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


Creating the header for the Gridview


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


Gridview with Custom Header


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.


CustomerIDCityCountryPostalCode
ALFKIBerlinGermany12209
ANATRMéxico D.F.Mexico05021
ANTONMéxico D.F.Mexico05023
AROUTLondonUKWA1 1DP
BERGSLuleåSwedenS-958 22
BLAUSMannheimGermany68306
BLONPStrasbourgFrance67000
BOLIDMadridSpain28023
BONAPMarseilleFrance13008
BOTTMTsawassenCanadaT2F 8M4
BSBEVLondonUKEC2 5NT
CACTUBuenos AiresArgentina1010
CENTCMéxico D.F.Mexico05022
CHOPSBernSwitzerland3012
COMMISao PauloBrazil05432-043
CONSHLondonUKWX1 6LT
DRACDAachenGermany52066
DUMONNantesFrance44000
EASTCLondonUKWX3 6FW
ERNSHGrazAustria8010
FAMIASao PauloBrazil05442-030
FISSAMadridSpain28034
FOLIGLilleFrance59000
FOLKOBräckeSwedenS-844 67
FRANKMünchenGermany80805
FRANRNantesFrance44000
FRANSTorinoItaly10100
FURIBLisboaPortugal1675
GALEDBarcelonaSpain08022
GODOSSevillaSpain41101
GOURLCampinasBrazil04876-786
GREALEugeneUSA97403
GROSRCaracasVenezuela1081
HANARRio de JaneiroBrazil05454-876
HILAASan CristóbalVenezuela5022
HUNGCElginUSA97827
HUNGOCorkIreland 
ISLATCowesUKPO31 7PJ
KOENEBrandenburgGermany14776
LACORVersaillesFrance78000
LAMAIToulouseFrance31000
LAUGBVancouverCanadaV3F 2K1
LAZYKWalla WallaUSA99362
LEHMSFrankfurt a.M.Germany60528
LETSSSan FranciscoUSA94117
LILASBarquisimetoVenezuela3508
LINODI. de MargaritaVenezuela4980
LONEPPortlandUSA97219
MAGAABergamoItaly24100
MAISDBruxellesBelgiumB-1180
MEREPMontréalCanadaH1J 1C3
MORGKLeipzigGermany04179
NORTSLondonUKSW7 1RZ
OCEANBuenos AiresArgentina1010
OLDWOAnchorageUSA99508
OTTIKKölnGermany50739
PARISParisFrance75012
PERICMéxico D.F.Mexico05033
PICCOSalzburgAustria5020
PRINILisboaPortugal1756
QUEDERio de JaneiroBrazil02389-673
QUEENSao PauloBrazil05487-020
QUICKCunewaldeGermany01307
RANCHBuenos AiresArgentina1010
RATTCAlbuquerqueUSA87110
REGGCReggio EmiliaItaly42100
RICARRio de JaneiroBrazil02389-890
RICSUGenèveSwitzerland1203
ROMEYMadridSpain28001
SANTGStavernNorway4110
SAVEABoiseUSA83720
SEVESLondonUKOX15 4NB
SIMOBKobenhavnDenmark1734
SPECDParisFrance75016
SPLIRLanderUSA82520
SUPRDCharleroiBelgiumB-6000
THEBIPortlandUSA97201
THECRButteUSA59801
TOMSPMünsterGermany44087
TORTUMéxico D.F.Mexico05033
TRADHSao PauloBrazil05634-030
TRAIHKirklandUSA98034
VAFFEÅrhusDenmark8200
VICTELyonFrance69004
VINETReimsFrance51100
WANDKStuttgartGermany70563
WARTHOuluFinland90110
WELLIResendeBrazil08737-363
WHITCSeattleUSA98128
WILMKHelsinkiFinland21240
WOLZAWarszawaPoland01-012


This same technique applies to DataGrid too you just need to follow the above steps for DataGrid.
Please feel free to post any queries.
The source code is available in VB.Net and C# here.

Posted by SIVANANDA REDDY G at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)