Jquery Plugin For Asp Net Gridview

Looking for a Jquery plugin that acts similar to ASP.NET GridView? Look no further! Jquery Plugin For Asp Net Gridview is my new favorite gridview plugin that lets you easily configure a grid and display content using powerful jquery methods

Have you ever tried to use ASP.Net GridView in a Angular front end? Yeah, it’s really not that bad. But it gets even better with this awesome jQuery plugin for Asp.Net gridview!

With a ton of Jquery plugins out there, it’s hard to go wrong with certain plugins. And when you’re looking for one that caters specifically to Asp.Net GridView, then this article will hopefully lend some insight.

Jquery Plugin For Asp Net Gridview

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>

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.

Demo

 View Demo

Downloads

You can download the complete source code along with the jQuery Scrollable Grid Plugin using the download link provided below

Leave a Comment