Version 2.0 Plugin available. Issues fixed:-
1. Alignment of header columns for GridViews that have more number of columns.
2. Alignment of header columns when external CSS is applied
 
Recently I wrote an article Dynamically freeze ASP.Net Gridview header using JavaScript where I explained how to make your GridView header’s fixed and make your GridView scrollable.
Using the same example I have created a jQuery Plugin for Scrollable GridView with Fixed header so that you can directly make a GridView scrollable.
 
 
HTML Markup
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
<Columns>
<asp:BoundField DataField = "ContactName" HeaderText = "Contact Name" />
<asp:BoundField DataField = "City" HeaderText = "City" />
<asp:BoundField DataField = "Country" HeaderText = "Country" />
Columns>
asp:GridView>
form>
 
 
Applying the Scrollable Grid jQuery Plugin
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
<script type = "text/javascript">
    $(document).ready(function () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300,
            Width: 467
        });
    });
</script>
 
Above you will notice I have referenced the jQuery and the Scrollable Grid plugin JS files. After that you need to initialize the GridView that you want to make as scrollable.
Parameters
ScrollHeight – Height of the Scrollable DIV
Width – Width of the Scrollable DIV (Optional)
Note: Thanks to the suggestion of “Steve Wellens”, I have modified the plugin so that it will automatically calculate the width of the Scrollable DIV based on the offset width of the GridView. Thus the width parameter is now optional. Hence the following will also work
 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
<script type = "text/javascript">
    $(document).ready(function () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300
        });
    });
</script>
 
 
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
Internet Explorer  FireFox  Chrome  Safari  Opera 
* All browser logos displayed above are property of their respective owners.
 
 
Demo
View Demo
 
 
Downloads
You can download the complete source code along with the jQuery Scrollable Grid Plugin using the download link provided below
Download Code