Saturday, May 7, 2016 Gridview sorting example using jquery

In this article I am going to explain how to do sorting in gridview data control using Jquery. Gridview sorting example using jquery
In the previous article I have explained how to validate the email address of users in MVC application using Data Annotation, how to filter record in MVC Webgrid based on textbox and how to apply or set the custom style on MVC webgrid.

We have three ways to implement this functionality: Jquery, Sql datasource and code behind. Here in this tutorial I am going to use Jquery plugin Tablesorter. Go to website of  Tablesorter Jquery plugin and download the latest version.


Create Store procedure to get data

Create proc SpGetMovie
Select * from dbo.Tb_Movie

Now add a webfrom to project and add the Gridview data control from toolbox to webform. Put the downloaded Jquery file in Script/Jquery folder and link to webform.
Add the below given JS and function to webform. This function will  make the Gridview sortable.

 <script src="Scripts/jquery-latest.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tablesorter.js" type="text/javascript"></script>
        $(document).ready(function () {

Complete HTML Markup:
<html xmlns="">
<head runat="server">
    <script src="Scripts/jquery-latest.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tablesorter.js" type="text/javascript"></script>
        $(document).ready(function () {
    <form id="form1" runat="server">
    <asp:gridview ID="grdmovie" runat="server" AutoGenerateColumns="False"        
            CellPadding="4" ForeColor="#333333" GridLines="None">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <asp:BoundField DataField="Name" HeaderText="Movie Name" SortExpression="name"/>
     <asp:BoundField DataField="Genre" HeaderText="Genre" SortExpression="Genre" />
      <asp:BoundField DataField="Budget" HeaderText="Budget" SortExpression="Budget" />
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />

        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />

Import the namespace
C# Code:
using System.Configuration;
using System.Data.SqlClient;
using System.Data; Code:
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Data

Create a method to get data and call it on page load event.
C# Code:
   SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    DataTable dt = new DataTable();
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    public void BindGridview()
        SqlDataAdapter adp = new SqlDataAdapter("SpGetMovie", con);
        adp.SelectCommand.CommandType = CommandType.StoredProcedure;
        dt = new DataTable();
        if (dt.Rows.Count > 0)
            grdmovie.DataSource = dt;

            grdmovie.UseAccessibleHeader = true;
            grdmovie.HeaderRow.TableSection = TableRowSection.TableHeader;
    } Code:
Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Dim dt As New DataTable()
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
        End If
    End Sub
    Public Sub BindGridview()
        Dim adp As New SqlDataAdapter("SpGetMovie", con)
        adp.SelectCommand.CommandType = CommandType.StoredProcedure
        dt = New DataTable()
        If dt.Rows.Count > 0 Then
            grdmovie.DataSource = dt

            grdmovie.UseAccessibleHeader = True
            grdmovie.HeaderRow.TableSection = TableRowSection.TableHeader
        End If
    End Sub

Note: To render <thead> and <tbody> add the below given code :

grdmovie.UseAccessibleHeader = True
grdmovie.HeaderRow.TableSection = TableRowSection.TableHeader

No comments:

Post a Comment