Steps to use Jqgrid. (If you will do a single mistake then JQgrid will not work.)
1.Go through the JQGrid Setup Process. Please follow the instruction here
2.Get all the scripts from here
3.Get all the Updated CSS form here
You can get the total code here
Bellow is my folder structure
Here is my code for GridContainer.aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridContainer.aspx.cs" Inherits="JQGridBind.GridContainer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#UsersGrid").jqGrid({
//Please put your corresponding hanler in place of GrdHandler.ashx
//I have used handler to fetch data from database.
url: 'GrdHandler.ashx',
datatype: 'json',
height: 250,
width: 600,
//Define your columns Here.
colNames: ['TestimonyID', 'Name', 'Location', 'Approved'],
colModel: [
{ name: 'TestimonyID', index: 'TestimonyID', width: 100, hidden: true, sortable: true, search: true, sorttype: 'integer' },
{ name: 'Name', index: 'Name', width:200, sortable: true, search: true, sorttype: 'string'},
{ name: 'Location', index: 'Location', width: 200, sortable: true, search: true, sorttype: 'string' },
{ name: 'Approved', index: 'Approved', width: 100, sortable: true, search: true, sorttype: 'date' }
],
rowNum: 10,
rowList: [10, 20, 30],
mtype: "GET",
//This property is very usefull.
loadonce: true,
pager: '#UsersGridPager',
sortname: 'TestimonyID',
viewrecords: true,
sortorder: 'asc',
sortable: true,
//Change your table name
caption: 'Testimony Table',
//Ignore Case while searching
ignoreCase: true,
editurl: 'GrdHandler.ashx',
onPaging: function (b) {
var nextPg = $(this).getGridParam("page");
currPg = nextPg;
return;
}
});
jQuery("#UsersGrid").jqGrid('filterToolbar', { searchOperators: false, searchOnEnter: false, autosearch: true });
});
</script>
</head>
<body>
<form id="HtmlForm" runat="server">
<table id="UsersGrid" cellpadding="0" cellspacing="0">
</table>
<div id="UsersGridPager" style="width:500px">
</div>
</form>
</body>
</html>
Here is my code for GrdHandler.ashx handler.
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Script.Serialization;
namespace JQGridBind
{
/// <summary>
/// Summary description for GrdHandler
/// </summary>
public class GrdHandler : IHttpHandler
{
public struct JQGridResults
{
public int page;
public int total;
public int records;
public JQGridRow[] rows;
}
public struct JQGridRow
{
public int id;
public string[] cell;
}
[Serializable]
public class Testimony
{
public int TestimonyID { get; set; }
public string Name { get; set; }
public string Location { get; set; }
public string Approved { get; set; }
public static int totalRecord;
}
private Collection<Testimony> GetUsers(string numberOfRows, string pageIndex, string sortColumnName, string sortOrderBy)
{
Collection<Testimony> testimonyCollection = new Collection<Testimony>();
DataSet ds = new DataSet();
string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["whativaluemost"].ConnectionString;
using (var con = new SqlConnection(connectionString))
{
con.Open();
int start = (Convert.ToInt32(pageIndex) - 1) * Convert.ToInt32(numberOfRows);
int end = Convert.ToInt32(pageIndex) * Convert.ToInt32(numberOfRows);
SqlCommand cmd = new SqlCommand();
SqlDataAdapter SqlDadp = new SqlDataAdapter();
DataTable dt = new DataTable();
cmd = new SqlCommand("spLoadAdminTestimonyList", con);
cmd.Parameters.Add(new SqlParameter("@Search", ""));
cmd.Parameters.Add(new SqlParameter("@Sort", sortColumnName));
cmd.Parameters.Add(new SqlParameter("@SortDirc", "ASC"));
cmd.CommandType = CommandType.StoredProcedure;
SqlDadp.SelectCommand = cmd;
SqlDadp.Fill(ds);
}
var userDetails = ds.Tables[0];
Testimony.totalRecord = userDetails.Rows.Count;
int userCount = userDetails.Rows.Count;
int i = 0;
while (i < userCount)
{
Testimony testimony = new Testimony();
testimony.Name = Convert.ToString(userDetails.Rows[i][0]);
testimony.Location = Convert.ToString(userDetails.Rows[i][1]);
int TestimonyID = 0;
if (userDetails.Rows[i][2] != null)
{
int.TryParse(userDetails.Rows[i][2].ToString(), out TestimonyID);
}
testimony.TestimonyID = TestimonyID;
testimony.TestimonyID = (int)userDetails.Rows[i][2];
testimony.Approved = Convert.ToString(userDetails.Rows[i][3]);
testimonyCollection.Add(testimony);
i++;
}
return testimonyCollection;
}
public void ProcessRequest(HttpContext context)
{
HttpRequest request = context.Request;
HttpResponse response = context.Response;
string url = request.RawUrl;
string output = string.Empty;
string _search = request["_search"];
string numberOfRows = request["rows"];
string pageIndex = request["page"];
string sortColumnName = request["sidx"];
string sortOrderBy = request["sord"];
//int totalRecords;
Collection<Testimony> lstTestimony = GetUsers(numberOfRows, pageIndex, sortColumnName, sortOrderBy);
output = BuildJQGridResults(lstTestimony, Convert.ToInt32(numberOfRows), Convert.ToInt32(pageIndex));
response.Write(output);
}
private string BuildJQGridResults(Collection<Testimony> lstTestimony, int numberOfRows, int pageIndex)
{
JQGridResults result = new JQGridResults();
List<JQGridRow> rows = new List<JQGridRow>();
foreach (Testimony testimony in lstTestimony)
{
JQGridRow row = new JQGridRow();
row.id = testimony.TestimonyID;
row.cell = new string[4];
row.cell[0] = testimony.TestimonyID.ToString();
row.cell[1] = testimony.Name;
row.cell[2] = testimony.Location;
row.cell[3] = testimony.Approved.ToString();
rows.Add(row);
}
result.rows = rows.ToArray();
result.page = pageIndex;
result.total = Testimony.totalRecord / numberOfRows;
return new JavaScriptSerializer().Serialize(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Sibasis Jena 