JQuery

Create jqGrid Using WebService

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 of jQuery and jqGrid. If you have already worked with WebServices and jQuery then it will be very easy for you to provide the 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.

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  2. <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />  
  3. <link rel="stylesheet" type="text/css" href="/Scripts/jquery.jqGrid-3.7.2/css/ui.jqgrid.css" />  
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
  6. <script type="text/javascript" src="/Scripts/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>  
  7. <script type="text/javascript" src="/Scripts/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>  
  8. <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 pager of the Grid. 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.

  1. <body>  
  2.     <input type="button" id="btn1" value="Show Grid" />  
  3.     <table id="employeesList">  
  4.     </table>  
  5.     <div id="gridpager">  
  6.     </div>  
  7. </body> 

I had also added a button on the click of which the Grid will be shown.

Step 2

Now create a script tag and add the following code:

  1. <script type="text/javascript">  
  2.     jQuery(document).ready(function () {  
  3.         $('#btn1').click(function () {  
  4.             debugger;  
  5.             $("#employeesList").jqGrid({  
  6.                 url: '/ws/RubricaWS.asmx/GetProvinces',  
  7.                 datatype: 'json',  
  8.                 mtype: 'POST',  
  9.                 ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },  
  10.                 serializeGridData: function (postData) {  
  11.                     return JSON.stringify(postData);  
  12.                 },  
  13.                 jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },  
  14.                 colModel: [  
  15.                 { name: 'ID', key: true, width: 60, align: "center", hidden: false },  
  16.                 { name: 'Department', width: 80, sortable: false, hidden: false },  
  17.                 { name: 'Name', width: 180, sortable: false, hidden: false },  
  18.                 { name: 'Address', width: 180, sortable: false, hidden: false }  
  19.                 ],  
  20.                 rowNum: 10,  
  21.                 rowList: [10, 20, 30],  
  22.                 pager: "#gridpager",  
  23.                 viewrecords: true,  
  24.                 gridview: true,  
  25.                 rownumbers: true,  
  26.                 height: 230,  
  27.                 caption: 'Employee List'  
  28.             }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });  
  29.         });  
  30.     });  
  31. </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 is provided, our webmethod will receive some information, this information is provided by the "serializedGridData", here postData contains some builtin information that are stringified before transferring to the WebMethod in the WebService.

jsonReader will receive data from code behind 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 is the id of the pager that is to be combined with the table to create a complete grid, its height, it's width, its caption and so on.

At 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 Webservise create a class having similarly named parameters like column names.

  1. public class jqGridRecord {  
  2.     public int ID {get; set;}  
  3.     public string Department { get; set; }  
  4.     public string Name {get; set;}  
  5.     public string Address { get; set; }  
  6. }

After creating the class a static string in which some data is provided to be bound with the Grid.

  1. 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 is taking some parameters, these parameters were passed from "json.stringfy".

Here I created a list that will carry the deserialize data. Row by row data is entered into the list and at the end all the data with some information like Total number of records, page number are returned to the jQuery code on the .aspx page where the binding will be done.

  1. [WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]  
  2. public JqGridData GetProvinces (int page, int rows, string sidx, string sord, bool _search) {  
  3.     JavaScriptSerializer ser = new JavaScriptSerializer ();  
  4.     List<jqGridRecord> data = ser.Deserialize<List<jqGridRecord>> (jsonData);  
  5.     int recordsCount = data.Count;  
  6.     int startIndex = (page - 1) * rows;  
  7.     int endIndex = (startIndex + rows < recordsCount) ? startIndex + rows : recordsCount;  
  8.     List<jqGridRecord> gridRows = new List<jqGridRecord> (rows);  
  9.     for (int i = startIndex; i < endIndex; i++)  
  10.         gridRows.Add (data[i]);  
  11.   
  12.     return new JqGridData() {  
  13.         total = (recordsCount + rows - 1) / rows,  
  14.         page = page,  
  15.         records = recordsCount,  
  16.         rows = gridRows  
  17.     };  
  18. }

Output

On running the application you will see a button and on the click of that button a grid will be displayed.

jQgrid using WebService

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs