Step by step how to create a jqGrid connected to an OData Web Service

        By Carmel Schvartzman

In this tutorial we'll learn how to download, install and use a jqGrid connected to an OData REST Web Service. We'll use  an online  WCF OData REST application in Asp.Net MVC, with support for HTTP GET requests, to AJAX feed a Trirand jqGrid supporting sorting, paging, and searching. 
The OData (Open Data) protocol is a REST  protocol which supports all CRUD operations (Create - Read - Update - Delete) against resources exposed as data services endpoints. For this tutorial, we'll  make use of  an  OData REST  service that will handle ONLY HTTP GET requests. 

We'll want to deploy a jqGrid using an MVC web site, but this  asp.net environment is not required, because the jqGrid can be displayed in any HTML web site :

First of all , we need to download and install the jqGrid from Trirand, so open the NuGet manager and do it:

Then create a simple MVC View and add the following links to the top (provided that the jquery.js files come with the _Layout) :

The data will be loaded from an OData web service located at the following location:
http://carmelwebapi.somee.com/ODATA/BlogDataService.svc/Blogs

The data comes in ATOM xml format, meaning that the root will be "feed" and the relevant elements will be "entry" elements :

Therefore, the jqGrid settings will contain an XMLREADER object, setting the specified root and row items:

xmlReader: {
                root: "feed",
                row: "entry",
                repeatitems: false,
                id: "BlogID",
            },


The jqGrid complete settings will be as follows:

The code to copy/paste is this:


<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var url1 = "http://carmelwebapi.somee.com/ODATA/BlogDataService.svc/Blogs";

        $("#list1").jqGrid({
            url: url1,
            datatype: "xml",
            mtype: "GET",
            colNames: ["ID", "Title", "Description", "MainPicture"],
            colModel: [
                { name: "BlogID", width: 20, align: "center" },
                { name: "Title", width: 80, align: "center" },
                { name: "Text", width: 600, height: 90, align: "center" },
                { name: "MainPicture", width: 110, formatter: imageFormat, sortable: true, align: "center" }
            ],
            pager: $("#pager1"),
            rowNum: 3,
            rowList: [2, 4, 6],
            sortname: "BlogID",
            sortorder: "desc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            caption: "Orchids List",
            height: "400px",
            loadonce: true,   //    !important
            xmlReader: {
                root: "feed",
                row: "entry",
                repeatitems: false,
                id: "BlogID",
            },
        }).navGrid('#pager1', { edit: false, add: false, del: false });

        function imageFormat(cellvalue, options, rowObject) {
            return '<img width="100px" height="100px" src="/Images/' + cellvalue + '" />';
        }
    });

</script>

<div style="width: 830px; border-radius: 10px; box-shadow: 30px 20px 1px #c0c0c0">
    <table id="list1"></table>
    <div id="pager1"></div>
</div>


I remarked some very important parts of the code in red.
As you see, we needed to use a formatter in order to format the image in the grid. The formatter works together with a method:

The complete reference of the jqGrid are in the Trirand web site :

Build and run the project, and check the paging support of the web grid:

And also the sorting :

And the searching:

Search for some info:

To find the jqgrid works really fine:

In this tutorial we've learned how to create a jqGrid connected to an OData Web Service.

That's all!! 

Happy programming.....

כתב: כרמל שוורצמן