Scrollable GridView with Fixed Headers using jQuery Plugin

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

Download ScrollableGridView_2.0 jQuery plugin

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

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">

<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

$(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