Step 1:
Add the jQuery, CSS, References and images to your project which are in this folder.
Step 2:
Add the following Namespaces to your project:
<link href="../../Content/themes/jquery-ui-jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.multiselect.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.locale-en-4.1.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid-4.1.2.min.js")" type="text/javascript"></script>
Step 3:
Add the Table and Two div for the grid and for paging:
<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>
<div id="dlgSupplier"></div>
Step 4:
Add the code to your project for JqGrid and Paging:
<script type="text/javascript">
$(document).ready(function () {
$('#jqgProducts').jqGrid({
//url from wich data should be requested
url: '@Url.Action("Products")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
onSelectRow: function (CityID) {
//trigger inline edit for row
$.post('@Url.Action("UpdateProduct")', { supplierId: CityID }, function () {
});
},
//columns names
colNames: ['CityID', 'CityName', 'CountryName', 'Record NO', 'State'],
//columns model
colModel: [
{ name: 'CityID', index: 'Id', editable: true, edittype: 'text', align: 'left', editable: false },
{ name: 'CityName', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 40 }, editrules: { required: true} },
{ name: 'CountryName', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 40 }, editrules: { required: true} },
{ name: 'Record NO', align: 'Left', editable: true, edittype: 'text', editoptions: { maxlength: 40 }, editrules: { required: true} },
{ name: 'StateID', align: 'Left', editable: true, edittype: 'text', editoptions: { maxlength: 40 }, editrules: { required: true} },
],
//pager for grid
pager: $('#jqgpProducts'),
//number of rows per page
rowNum: 10,
//initial sorting column
sortname: 'Id',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%'
});
$('#jqgProducts').jqGrid('navGrid', '#jqgpProducts',
{ edit: false, add: false, del: true, search: false }, { width: 'auto', url: '@Url.Action("DeleteProduct")' }).jqGrid('navButtonAdd', '#jqgpProducts',
{
caption: 'Search',
buttonicon: 'ui-icon-search',
onClickButton: function () {
$('#jqgProducts').jqGrid('searchGrid', { multipleSearch: true });
},
position: 'last',
title: 'Search'
}
);
});
</script>
JQ Grid Documentation In CONTROLLER
Step 5:
Add the namespace to the controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SampleJQGrid.ServiceReference1;
using Lib.Web.Mvc.JQuery.JqGrid;
using System.IO;
using System.Text;
Step 6:
Add the following code in the controller for the Jqgrid:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Products(JqGridRequest request, ObjectsClass viewModel)
{
Service1Client obj = new Service1Client();
int totalRecords = obj.RecordCountSer();
string filterExpression = String.Empty;
if (request.Searching)
{
//Single searching
if (request.SearchingFilter != null)
filterExpression = GetFilter(request.SearchingFilter.SearchingName, request.SearchingFilter.SearchingOperator, request.SearchingFilter.SearchingValue);
//Advanced searching, Toolbar searching (stringResult = true)
else if (request.SearchingFilters != null)
{
StringBuilder filterExpressionBuilder = new StringBuilder();
string groupingOperatorToString = request.SearchingFilters.GroupingOperator.ToString();
foreach (JqGridRequestSearchingFilter searchingFilter in request.SearchingFilters.Filters)
{
filterExpressionBuilder.Append(GetFilter(searchingFilter.SearchingName, searchingFilter.SearchingOperator, searchingFilter.SearchingValue));
filterExpressionBuilder.Append(String.Format(" {0} ", groupingOperatorToString));
}
if (filterExpressionBuilder.Length > 0)
filterExpressionBuilder.Remove(filterExpressionBuilder.Length - groupingOperatorToString.Length - 2, groupingOperatorToString.Length + 2);
filterExpression = filterExpressionBuilder.ToString();
search = filterExpression;
}
}
//Fix for grouping, because it adds column name instead of index to SortingName
string sortingName = request.SortingName.Replace("Category", "CategoryID");
//Prepare JqGridData instance
//Table with rows data
JqGridResponse response = new JqGridResponse()
{
//Total pages count
TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
////Page number
PageIndex = request.PageIndex,
////Total records count
TotalRecordsCount = totalRecords
};
List<ObjectsClass> listobj = new List<ObjectsClass>();
foreach (ObjectsClass product in obj.ListCityMainPage(request.PageIndex + 1, 10, search)) {
response.Records.Add(new JqGridRecord(Convert.ToString(product.CityID), new List<object>()
{
product.CityID,
product.CityName,
product.CountryName,
Convert.ToString( product.CreatedDate),
product.StateID
}));
}
return new JqGridJsonResult() { Data = response };
}
Step 7:
Add the get filler methods in the controller for searching:
private string GetFilter(string searchingName, JqGridSearchOperators searchingOperator, string searchingValue)
{
string searchingOperatorString = String.Empty;
switch (searchingOperator)
{
case JqGridSearchOperators.Eq:
searchingOperatorString = "=";
break;
case JqGridSearchOperators.Ne:
searchingOperatorString = "!=";
break;
case JqGridSearchOperators.Lt:
searchingOperatorString = "<";
break;
case JqGridSearchOperators.Le:
searchingOperatorString = "<=";
break;
case JqGridSearchOperators.Gt:
searchingOperatorString = ">";
break;
case JqGridSearchOperators.Ge:
searchingOperatorString = ">=";
break;
}
if ((searchingName == "Id") || (searchingName == "CountryName") || (searchingName == "CityName"))
return String.Format("{0}", searchingValue);
if ((searchingName == "ProductName"))
{
switch (searchingOperator)
{
case JqGridSearchOperators.Bw:
return String.Format("{0}.StartsWith(\"{1}\")", searchingName, searchingValue);
case JqGridSearchOperators.Bn:
return String.Format("!{0}.StartsWith(\"{1}\")", searchingName, searchingValue);
case JqGridSearchOperators.Ew:
return String.Format("{0}.EndsWith(\"{1}\")", searchingName, searchingValue);
case JqGridSearchOperators.En:
return String.Format("!{0}.EndsWith(\"{1}\")", searchingName, searchingValue);
case JqGridSearchOperators.Cn:
return String.Format("{0}.Contains(\"{1}\")", searchingName, searchingValue);
case JqGridSearchOperators.Nc:
return String.Format("!{0}.Contains(\"{1}\")", searchingName, searchingValue);
default:
return String.Format("{0} {1} \"{2}\"", searchingName, searchingOperatorString, searchingValue);
}
}
return String.Empty;
}