JqGrid Basic Examples In MVC
In web application, every time we need to represent data into tabular form. In Asp.Net, we are using gridview but in Asp.Net MVC we don't have any readymade tool like gridview that handle pagination, sorting and some other functions. So we are using third party tool like jqGrid, DataTable etc. Here we are going to study about jqGrid in MVC. jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.
Here we are creating an Asp.Net MVC application for demonstrating jqGrid. That has a controller that name is JqGridController. In that controller, GetStudents() method return the list of records from database table Student using Entity Framework in json format. Index action method is created for ui representation.
Controller Codes
public class JqGridController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetStudents()
{
DbStudentEntities db = new DbStudentEntities();
var data = from i in db.Students
select new
{
StudentId = i.StudentId,
Name = i.Name,
Mobile = i.Mobile,
Email = i.Email,
City = i.City,
DOJ = i.DOJ
};
return Json(data, JsonRequestBehavior.AllowGet);
}
API References
You can download the jqGrid api package or install the jqGrid packages using NuGet package installer from visual studio. After that add all required scripts on page. Below is showing all necessary reference files.
<link href="~/Scripts/JqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="~/Scripts/JqGrid/js/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/JqGrid/js/jquery.jqGrid.min.js"></script>
Html codes
<div>
<table id="tblData"></table>
<div id="divPager"></div>
We done the setup of controller codes and added the jqGrid required api refrences on the page. Now we are going to learn one by one features of jqGrid.
A simple basic JqGrid
Now we are creating js codes for binding a basic jqGrid that have four columns Name, Mobile, Email and City. Below is showing required options of jqGrid for binding a basic grid.
1. url: specify the url that return the data in specified format.
2. datatype: specify the type of your data that return from url.
3. mtype: specify that Post or Get option for retrieving the data.
4. colNames: used for defining header names
5. colModel: used for server side object manipulation and many more feature options.
6. width: set the width of grid.
7. height: set the height of grid.
8. caption: set the title of grid.
Below is showing basic js script codes for binding jqGrid.
<script>
$(document).ready(function () {
$("#tblData").jqGrid({
url: 'http://localhost:51548/JqGrid/GetStudents',
datatype: "json",
mtype: 'Get',
colNames: ['Name', 'Mobile', 'Email', 'City'],
colModel: [{ name: 'Name', index: 'Name' },
{ name: 'Mobile', index: 'Mobile' },
{ name: 'Email', index: 'Email' },
{ name: 'City', index: 'City' }],
width: 700,
height: 'auto',
caption: "JqGrid Sample By programidea.com"
});
});
Set width of column in jqGrid
You can adjust the width of columns. Use colModel's width option for column size.
$("#tblData").jqGrid({
url: 'http://localhost:51548/JqGrid/GetStudents',
datatype: "json",
mtype: 'Get',
colNames: ['Name', 'Mobile', 'Email', 'City'],
colModel: [{ name: 'Name', index: 'Name', width: 180 },
{ name: 'Mobile', index: 'Mobile', width: 100 },
{ name: 'Email', index: 'Email', width: 200 },
{ name: 'City', index: 'City', width: 120 }],
width: 700,
height: 'auto',
caption: "JqGrid Sample By programidea.com"
});
Hide the column in jqGrid
You can hide any columns. Use colModel's hidden option for column hiding. It accepts boolean value true or false. Default value is false. In Below example, we are hiding Email column.
$("#tblData").jqGrid({
url: 'http://localhost:51548/JqGrid/GetStudents',
datatype: "json",
mtype: 'Get',
colNames: ['Name', 'Mobile', 'Email', 'City'],
colModel: [{ name: 'Name', index: 'Name' },
{ name: 'Mobile', index: 'Mobile' },
{ name: 'Email', index: 'Email', hidden: true },
{ name: 'City', index: 'City' }],
width: 700,
height: 'auto',
caption: "JqGrid Sample By programidea.com"
});
Set the column alignment in jqGrid
You can align the columns of jqGrid. Use colModel's align option for column alignment. It have three options: left, center, right. Default value is left.
$("#tblData").jqGrid({
url: 'http://localhost:51548/JqGrid/GetStudents',
datatype: "json",
mtype: 'Get',
colNames: ['Name', 'Mobile', 'Email', 'City'],
colModel: [{ name: 'Name', index: 'Name', align: 'center' },
{ name: 'Mobile', index: 'Mobile', align: 'center' },
{ name: 'Email', index: 'Email', align: 'center' },
{ name: 'City', index: 'City', align: 'center' }],
width: 700,
height: 'auto',
caption: "JqGrid Sample By programidea.com"
});
Create first column as index column in jqGrid
Sometimes we have requirement for first column as index column of the grid that showing the index of each rows starting from 1. JqGrid has an option rownumbers that accepts boolean value true or false. Default value is false.
$("#tblData").jqGrid({
url: 'http://localhost:51548/JqGrid/GetStudents',
datatype: "json",
mtype: 'Get',
colNames: ['Name', 'Mobile', 'Email', 'City'],
colModel: [{ name: 'Name', index: 'Name' },
{ name: 'Mobile', index: 'Mobile' },
{ name: 'Email', index: 'Email' },
{ name: 'City', index: 'City' }],
width: 700,
rownumbers: true,
height: 'auto',
caption: "JqGrid Sample By programidea.com"
