Scrollable GridView with Fixed Headers and Client Side Sorting using jQuery in ASPNet

In this article I will explain with an example, how to scroll GridView with fixed Headers and implement client side Sorting using jQuery in ASP.Net.

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.

Download and install Northwind Database

HTML Markup

The HTML Markup consists of following controls:

TABLE – For defining fixed header column.

div – For applying style properties to make the GridView scrollable.

GridView – For displaying data.

The GridView consists of three BoundField columns.

<thead>

<tr>

<th scope="col">Customer Id</th>

<th scope="col">Country</th>

</tr>

</thead>

</table>

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="grid">

<asp:BoundField ItemStyle-Width="200px" DataField="CustomerID" HeaderText="Customer Id" />

<asp:BoundField ItemStyle-Width="200px" DataField="City" HeaderText="City" />

<asp:BoundField ItemStyle-Width="200px" DataField="Country" HeaderText="Country" />

</Columns>

</asp:GridView>

</div>

Applying Sorter Plugin using jQuery

Inside the HTML, the following script files are inherited.

1. jquery-1.3.2.min.js

2. jquery.tablesorter.min.js

Inside the document ready event handler, the tablesorter plugin has been applied to the GridView control and the SetDefaultSortOrder method to set the default sort order.

Sort method gets called when user clicks on the header row for sorting it accepts the cell and the sort order in which the grid needs to be sorted.

SetDefaultSortOrder method sets the default sort order for the GridView.

$(document).ready(

function () {

$("#<%= gvCustomers.ClientID%>").tablesorter();

SetDefaultSortOrder();

});

function Sort(cell, sortOrder) {

var sorting = [[cell.cellIndex, sortOrder]];

$("#<%= gvCustomers.ClientID%>").trigger("sorton", [sorting]);

if (sortOrder == 0) {

sortOrder = 1;

cell.className = "sortDesc";

}

else {

sortOrder = 0;

cell.className = "sortAsc";

}

cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")");

cell.onclick = function () { Sort(this,sortOrder); };

document.getElementById("container").scrollTop = 0;

}

function SetDefaultSortOrder() {

var gvHeader = document.getElementById("dummyHeader");

var headers = gvHeader.getElementsByTagName("TH");

for (var i = 0; i < headers.length; i++) {

headers[i].setAttribute("onclick", "Sort(this, 1)");

headers[i].onclick = function () { Sort(this, 1); };

headers[i].className = "sortDesc";

}

</script>

CSS

The CSS properties are used for their respective classes to the sections.

.sortAsc { background-image: url(images/asc.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; width: 200px; }

.sortDesc { background-image: url(images/desc.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; width: 200px; }

.grid { font-family: Arial; font-size: 10pt; width: 600px; }

</style>

Binding the GridView with records from SQL Server Database Table

Inside the Page_Load event handler, the GridView is populated with records from the SQL Server database using a DataTable.

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

DataTable dt = new DataTable();

string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

string sql = "SELECT CustomerID, City, Country FROM Customers";

using (SqlConnection con = new SqlConnection(constr))

{

using (SqlDataAdapter sda = new SqlDataAdapter(sql, con))

{

sda.Fill(dt);

gvCustomers.DataSource = dt;

gvCustomers.DataBind();

gvCustomers.HeaderRow.Attributes["style"] = "display:none";

gvCustomers.UseAccessibleHeader = true;

gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader;

}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Me.IsPostBack Then

Dim dt As DataTable = New DataTable()

Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

Dim sql As String = "SELECT CustomerID, City, Country FROM Customers"

Using con As SqlConnection = New SqlConnection(constr)

Using sda As SqlDataAdapter = New SqlDataAdapter(sql, con)

sda.Fill(dt)

gvCustomers.DataSource = dt

gvCustomers.DataBind()

gvCustomers.HeaderRow.Attributes("style") = "display:none"

gvCustomers.UseAccessibleHeader = True

gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader

End Using

End If

End Sub

Screenshot

Scrollable GridView with Fixed Headers and Client Side Sorting using jQuery in ASP.Net

Making GridView Scrollable with Fixed Headers in ASP.Net

In order to make the GridView scrollable, the original GridView Header will be hidden and a fake GridView header will be placed above the GridView and the GridView will be placed inside an HTML DIV with scrollbar.

You need to follow the following steps to make the GridView scrollable.

1. Right click on the Page and select View Source option from the Context Menu.

2. Then look for the GridView and copy its Header Row along with the Table tag as shown below.

3. Paste the copied content above the GridView and remove the id attribute from the HTML Table and add the ending tag for the HTML table.

4. Set width for each cell of the Header Table.

Note: Width of the Header Cell must be same as that of its corresponding GridView column.

And then, wrap the HTML Table within an HTML DIV with a specific width.

Note: Width of the HTML DIV will be total width of all GridView columns. In this case, 150 x 4 = 600.

Once all the above steps are done, your GridView will now be scrollable.

Screenshot

Note: You might see some very minor alignment differences between header row and data row vertical borders. This can be adjusted through CSS and also you can hide vertical borders as shown below.

GridView has been assigned with the rules property set to none to hide the columns in the Header row.