Introduction
Here, I will create a jqGrid whose data will be provided from a WebService. The data will be static data because I am creating it for beginners in jQuery and jqGrid. If you have already worked with WebServices and jQuery, then it will be very easy for you to provide dynamic data from a database.
Step 1. First of all, you need to add various libraries to the head section of your application. These libraries are used to help create the jqGrid.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/Scripts/jquery.jqGrid-3.7.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Scripts/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/Scripts/json2.js"></script>
Now, you need to add a table and a div to the body section of your application. The table will be used to show the data, and the div will be the Grid pager. In the div, many types of useful links and buttons are created that help to move, search, add, refresh, and so on in the Grid.
<body>
<input type="button" id="btn1" value="Show Grid" />
<table id="employeesList"></table>
<div id="gridpager"></div>
</body>
I have also added a button on the click on which the Grid will be shown.
Step 2. Now, create a script tag and add the following code.
<script type="text/javascript">
jQuery(document).ready(function () {
$('#btn1').click(function () {
debugger;
$("#employeesList").jqGrid({
url: '/ws/RubricaWS.asmx/GetProvinces',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
repeatitems: false,
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
colModel: [
{ name: 'ID', key: true, width: 60, align: "center", hidden: false },
{ name: 'Department', width: 80, sortable: false, hidden: false },
{ name: 'Name', width: 180, sortable: false, hidden: false },
{ name: 'Address', width: 180, sortable: false, hidden: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#gridpager",
viewrecords: true,
gridview: true,
rownumbers: true,
height: 230,
caption: 'Employee List'
}).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });
});
});
</script>
This code is used to create the jqGrid. Here, first, the URL of the method in the Webservice is provided. Then it's type and data to be sent are provided, our web method will receive some information, this information is provided by the "serializedGridData", here postData contains some builtin information that is stringified before transferring to the WebMethod in the WebService.
jsonReader will receive data from the code behind it and will implement them in the Grid. ColModel creates the column in the grid, here we can provide the name of columns, we can make them hidden, can change their alignment, can make them sortable, and much more.
After this, some information is also provided, like how much data we would like to see on each page, for the first time how much data is to be shown, what the id of the page is to be combined with the table to create a complete grid, its height, it's width, its caption and so on.
In the end, the pager information is provided. Add:true means that you will see a "+" sign in the grid to add a row to the grid (but it will not work because its functionality is not provided :D ), Edit:true means that you can edit a specific row, search:true means that you will see an option to search the data depending on columns, many other options can also be provided, but remember that whatever you are making true from here doesn't mean you have provided the functionality and it will start working, nor does it have "Rajnikant" Powers to start working on its own. So before making anything true, just check whether you have provided the functionality for it or not.
Step 3. Now, add a WebService to your application.
In the Web service, create a class having similar to named parameters like column names.
public class jqGridRecord
{
public int ID { get; set; }
public string Department { get; set; }
public string Name { get; set; }
public string Address { get; set; }
}
After creating the class, a static string in which some data is provided to be bound with the Grid.
private static string jsonData =
"[{\"ID\":1,\"Department\":\".NET\",\"Name\":\"Anubhav\",\"Address\":\"Ghaziabad\"}," +
"{\"ID\":2,\"Department\":\".NET\",\"Name\":\"Abhishek\",\"Address\":\"Banaras\"}," +
"{\"ID\":3,\"Department\":\".NET\",\"Name\":\"Mohit\",\"Address\":\"Kashi\"}," +
"{\"ID\":4,\"Department\":\"Testing\",\"Name\":\"Vivek\",\"Address\":\"Kanpur\"}," +
"{\"ID\":5,\"Department\":\"Tesing\",\"Name\":\"Priyanka\",\"Address\":\"Allahabad\"}," +
"{\"ID\":6,\"Department\":\"Marketting\",\"Name\":\"Nikhil\",\"Address\":\"Delhi\"}," +
"{\"ID\":7,\"Department\":\".NET\",\"Name\":\"Manoj\",\"Address\":\"Dehradun\"}," +
"{\"ID\":8,\"Department\":\"PHP\",\"Name\":\"Sandeep\",\"Address\":\"Muradabad\"}," +
"{\"ID\":9,\"Department\":\"PHP\",\"Name\":\"Sikha\",\"Address\":\"Noida\"}," +
"{\"ID\":10,\"Department\":\"Designing\",\"Name\":\"Nandan\",\"Address\":\"Deshradun\"}," +
"{\"ID\":11,\"Department\":\"Testing\",\"Name\":\"Rupal\",\"Address\":\"Chandigarh\"}]";
After this I created a WebMethod that takes some parameters, these parameters were passed from "JSON.stringfy".
Here, I created a list that will carry the deserialized data. Row-by-row data is entered into the list, and at the end, all the data with some information like the Total number of records and page number are returned to the jQuery code on the .aspx page where the binding will be done.
[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public JqGridData GetProvinces(int page, int rows, string sidx, string sord, bool _search)
{
JavaScriptSerializer ser = new JavaScriptSerializer();
List<jqGridRecord> data = ser.Deserialize<List<jqGridRecord>>(jsonData);
int recordsCount = data.Count;
int startIndex = (page - 1) * rows;
int endIndex = (startIndex + rows < recordsCount) ? startIndex + rows : recordsCount;
List<jqGridRecord> gridRows = new List<jqGridRecord>(rows);
for (int i = startIndex; i < endIndex; i++)
{
gridRows.Add(data[i]);
}
return new JqGridData()
{
total = (recordsCount + rows - 1) / rows,
page = page,
records = recordsCount,
rows = gridRows
};
}
Output
When running the application, you will see a button, and when you click on that button, a grid will be displayed.
![JQgrid using WebService]()