Home » ASP.NET » How To Make Scrollable GridView with Fixed Headers using jQuery Plugin?

How To Make Scrollable GridView with Fixed Headers using jQuery Plugin?

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>
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 using the download link provided below

FreezeGridViewHeaderusingjQueryPlugin.zip

The Plugin has been submitted to jQuery. Thus you can download the plugin from here

One Response so far.

  1. kshitij says:

    helpful

www.000webhost.com