Click here to Skip to main content
15,867,835 members
Articles / Web Development / XHTML

Working with jqGrid and a WCF Service

Rate me:
Please Sign up or sign in to vote.
4.07/5 (11 votes)
20 Jul 2009CPOL2 min read 94.7K   3.4K   18   13
How to work with jqGrid and a WCF Service.

Introduction

Here, I am going to show how to work with jqGrid with WCF in an ASP.NET application. jqGrid is an AJAX-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.

Using the code

  1. To start with, we need to download the latest version of jQuery and the jqGrid plug-in. At the time of writing, the latest version of jqGrid is jqGrid 3.5 beta. The major differences for this version is that starting with this version, jqGrid does not use a loader (which loads the needed files one by one), but all the needed code is contained in one file. The desired modules can be built using the jqGrid download manager. In order to use this, first a language file should be loaded and then the jqGrid file.
  2. Next, you need to add JavaScript into your project and references using the script tag. In order to use jqGrid 3.5, first a UI theme CSS file should be loaded. The detailed instruction is in the downloaded jqGrid zip file. Then, we need to create an AJAX-enabled WCF Service in our ASP.NET web project. We need to create an method and add the following attributes to the method:
  3. C#
    [OperationContract]
    [WebInvoke(Method = "POST",
                BodyStyle = WebMessageBodyStyle.WrappedRequest,
                ResponseFormat = WebMessageFormat.Json
                )]
    public string GetProducts()
    {
        IList<product> personList = ProductRepository.GetProducts();
        int total = 1, page = 10;
        ProductJqGridView productJqGridView = 
           new ProductJqGridView(total, page, personList);
        return productJqGridView.ToJson();
    }

    The GetProducts method will return a list of products. After that, I instantiate the ProductJqGridView object and call the ToJson method to serialize the object into the correct JOSN format so that jqGrid can consume it.

  4. Before we look at the JavaScript, we need to see what is required in the markup. We need a table to display the data, a div for the page navigation, and a button to load the data. Please see the source code for details.
  5. Last, we are going to look at how to write JavaScript to bind the JSON data to the jqGrid. We use a function as our data type. The function we are using is getProducts, which does an AJAX call to the server and a JSON string is returned. In successFunction, we insert all the data into the jqGrid by calling grid.addJSONData.
  6. JavaScript
    function successFunction(jsondata) {
        var thegrid = jQuery("#productGridView")[0];
        thegrid.addJSONData(JSON.parse(jsondata.d));
    }
     
    function getProducts() {
        $.ajax({
            url: DataLoader.svc/GetProducts,
            data: "{}",  // For empty input data use "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: successFunction
        });
    }
     
    function dataBindToGrid() {
        jQuery("#productGridView").jqGrid({
            datatype: getProducts,
            colNames: ['ProductID', 'Name', 'ProductNumber', 'Color', 'Size', 'Style'],
            colModel: [{ name: 'ProductID', index: 'ProductID', width: 200, align: 'left' },
                { name: 'Name', index: 'Name', width: 200, align: 'left' },
                { name: 'ProductNumber', index: 'ProductNumber', width: 200, align: 'left' },
                { name: 'Color', index: 'Color', width: 200, align: 'left' },
                { name: 'Size', index: 'Size', width: 200, align: 'left' },
                { name: 'Style', index: 'Style', width: 200, align: 'left' }
                       ],
            rowNum: 10,
            rowList: [5, 10, 20, 50, 100],
            sortname: 'ProductID',
            pager: jQuery('#pageNavigation'),
            sortorder: "desc",
            viewrecords: true
        });
    }
    jQuery(document).ready(function() {
        jQuery("input#LoadData").live("click", dataBindToGrid);
    });

A word of caution...

This is only a simple example using jqGrid, many of its functionalities have not been implemented. Since this is only a "Hello World" like example, I will show some of its advanced functionalities in some other article.

Conclusion

The hardest part for using AJAX and jqGrid is not the concept but the level of JavaScript skills. To be able to write maintainable AJAX code, you need to learn JavaScript. I have created an article on my blog to help you learn JavaScript. Here is the link. I hope my examples can help people get started using jqGrid using WCF in an ASP.NET web application. Your feedback is much more appreciated.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer INTERGEN
New Zealand New Zealand
I am currently employed by EMS-Cortex New Zealand as Intermediate Software Developer.
I previously worked Intergen New Zealand as Software Developer.
If you like my article , check my blog too.
http://ybbest.wordpress.com/

Comments and Discussions

 
Questionhow to enable editing and saving ? Pin
rajesh_chan21-May-13 22:26
rajesh_chan21-May-13 22:26 
QuestionJQGrid Mobile? Pin
gchmex28-Apr-13 19:19
gchmex28-Apr-13 19:19 
QuestionI have a question Pin
weblogical21-Mar-13 2:31
weblogical21-Mar-13 2:31 
GeneralMy vote of 5 Pin
iamvova16-Dec-12 12:46
iamvova16-Dec-12 12:46 
Generalhave a problem with the jqgrid and wcf Pin
bhavyagowda29-Jun-12 0:57
bhavyagowda29-Jun-12 0:57 
Generalthank u Pin
firevampire_135-Feb-12 23:49
firevampire_135-Feb-12 23:49 
QuestionThanks! Pin
tmckinneyii16-Jul-11 5:04
tmckinneyii16-Jul-11 5:04 
GeneralMy vote of 1 Pin
Lee P Richardson27-Mar-11 3:41
Lee P Richardson27-Mar-11 3:41 
GeneralMy vote of 1 Pin
Xequence18-Oct-10 9:04
Xequence18-Oct-10 9:04 
QuestionHow to get the parameter? Pin
ahherm29-Sep-09 23:43
ahherm29-Sep-09 23:43 
GeneralThanks alotttttttt.............. Pin
naveenIIT8-Sep-09 7:25
naveenIIT8-Sep-09 7:25 
Generalmore clarification Pin
Md. Marufuzzaman20-Jul-09 21:14
professionalMd. Marufuzzaman20-Jul-09 21:14 
GeneralRe: more clarification Pin
YBBEST_21-Jul-09 0:30
YBBEST_21-Jul-09 0:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.