Reader Level:
ARTICLE

JQ Grid Documentation In .CSHTML

Posted by Marish Littu Articles | JQuery July 17, 2012
In this article you will learn about JQ Grid Documentation In .CSHTML.
  • 0
  • 0
  • 9456

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>

J
Q 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;
}
 

Article Extensions
Contents added by soluk al on Sep 28, 2012
COMMENT USING

Trending up