In this article I have explained how to add vertical scrollbar to ASP.Net GridView using jQuery ScrollableGridView plugin.
This plugin adds vertical scrollbar to GridView with Fixed header row.
 
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
 
In one of my previous articles I have explained how to use the Scrollable GridView with Fixed Headers using jQuery Plugin. This plugin worked great in all browsers but is not compatible with ASP.Net AJAX UpdatePanel control. Hence I have developed an extension plugin which will work with ASP.Net AJAX UpdatePanels too.
 
HTML Markup
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server">
    <ContentTemplate>
        <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>
                <asp:Button ID="Button1" runat="server" Text="Refresh" />
    </ContentTemplate>
</asp:UpdatePanel>
 
 
Applying the Scrollable Grid jQuery Plugin
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300,
            IsInUpdatePanel: true
        });
    });
</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)
IsInUpdatePanel – This parameter must be set to true when the GridView is inside an ASP.Net AJAX UpdatePanel.
 
Demo
View Demo
 

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.


Downloads
You can download the complete source code along with the jQuery Scrollable Grid Plugin (it includes the plugin) using the download link provided below