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

Introduction:

Here I will explain to play with DIV and jQuery for GridView Sorting and Scrollable view.
I couldn’t find a better way of doing it hence did not write. Few days back I noticed that a plug in is available for jQuery that can sort HTML tables Thus I quickly tried to merge it with my Scrollable GridView and finally it works succeeded and here’s it for you an ASP.Net GridView Control with Fixed Headers and scroll functionality with Client Side sorting.


HTML .aspx file code

<div id = "container" style ="height:200px;overflow:auto;width:617px ">

<asp:GridView ID="GridView1" runat="server"

    AutoGenerateColumns = "false" CssClass = "grid">

   <Columns>

    <asp:BoundField ItemStyle-Width = "200px"

    DataField = "EmpID" HeaderText = "EmpID" />

    <asp:BoundField ItemStyle-Width = "200px"

    DataField = "EmployeeName" HeaderText = "EmployeeName"/>

    <asp:BoundField ItemStyle-Width = "200px"

    DataField = "Salary" HeaderText = "Salary"/>

   </Columns>

</asp:GridView>

</div>

Code behind file .cs

protected void Page_Load(object sender, EventArgs e)

{

    if (!this.IsPostBack)

    {

        this.BindGrid();

    }

}

private void BindGrid()

{

        DataTable dt = new DataTable();
        dt.Columns.Add("EmpID", typeof(Int32));
        dt.Columns.Add("EmployeeName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Location", typeof(string));
        dt.Columns.Add("Salary", typeof(decimal));
        dt.Rows.Add(31, "Muhammed Asad", "BCIT", "Karachi", 85);
        dt.Rows.Add(32, "Muhammed Ali", "Msc", "Karachi", 812);
        dt.Rows.Add(33, "Faraz Ahmed", "MS", "Lahore", 67);
        dt.Rows.Add(34, "Asma", "MBA", "Hyderabad", 34);
        dt.Rows.Add(36, "Faheem Shah", "MBBS", "Karachi", 74);
        dt.Rows.Add(37, "Asif Raza", "B.Tech", "Hyderabad", 55);
        dt.Rows.Add(38, "Daniel", "CA", "Karachi", 853);
        dt.Rows.Add(31, "Muhammed Asad", "BCIT", "Karachi", 85);
        dt.Rows.Add(32, "Muhammed Ali", "Msc", "Karachi", 812);
        dt.Rows.Add(33, "Faraz Ahmed", "MS", "Lahore", 67);
        dt.Rows.Add(34, "Asma", "MBA", "Hyderabad", 34);
        dt.Rows.Add(36, "Faheem Shah", "MBBS", "Karachi", 74);
        dt.Rows.Add(37, "Asif Raza", "B.Tech", "Hyderabad", 55);
        dt.Rows.Add(38, "Daniel", "CA", "Karachi", 853);
        dt.Rows.Add(31, "Muhammed Asad", "BCIT", "Karachi", 85);
        dt.Rows.Add(32, "Muhammed Ali", "Msc", "Karachi", 812);
        dt.Rows.Add(33, "Faraz Ahmed", "MS", "Lahore", 67);
        dt.Rows.Add(34, "Asma", "MBA", "Hyderabad", 34);
        dt.Rows.Add(36, "Faheem Shah", "MBBS", "Karachi", 74);
        dt.Rows.Add(37, "Asif Raza", "B.Tech", "Hyderabad", 55);
        dt.Rows.Add(38, "Daniel", "CA", "Karachi", 853);
        GridView1.DataSource = dt;
        GridView1.DataBind(); 

               

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

    GridView1.UseAccessibleHeader = true;

    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

Add the following CSS to the head section of the page

<style type = "text/css">

    .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

    }

    .grid THEAD

    {

         background-color:Green;

         color:White;

    }

</style>

 Client Side Sorting
Now for the Client Side Script I have used the tablesorter jQuery Plugin which will be used to sort the GridView control. Hence add the following scripts to your page

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>

<script type = "text/javascript">

    $(document).ready(function() {

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

        SetDefaultSortOrder();

    });

    function Sort(cell, sortOrder) {

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

        $("#<%=GridView1.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>

The above code has been tested in the following browsers

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

That’s it with this the article comes to an end. Hope you liked it.

You can download the complete source code in VB.Net and C# using the link below