Empty Jqgrid when fetching json data from a restful web service using restx server

Question

I have included following libraries files:

<script src="JQuery/jquery-1.5.1.js" type="text/javascript"></script>
<script src="jQuery/src/i18n/grid.locale-en.js" type="text/javascript" charset="utf-8"> </script>
<script src="JQuery/jqgrid_demo38/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="JQuery/js/jquery.jqGrid.src.js" type="text/javascript"></script>

Using following code to create the grid:

jQuery(document).ready(function(){
    jQuery("#list2").jqGrid({
        url: 'http://localhost:8001/resource/abc/entries',
        mtype: 'GET',
        datatype: "json",
        colNames: ['Trans ID', 'ACC ID', 'Day ID', 'Date', 'Balance'],
        colModel: [
            { name: 'Trans_ID', index: 'Trans_ID', width: 130 },
            { name: 'ACC_ID', index: 'ACC_ID', width: 100 },
            { name: 'Day_ID', index: 'Day_ID', width: 100 },
            { name: 'Summary_Date', index: 'Summary_Date', width: 90 },
            { name: 'Balance', index: 'Balance', width: 85 }
        ],
        width: 700,
        heigth: 200,
        imgpath: "jqgrid_demo38/themes/redmond/images",
        loadonce: true,
        rownumbers: true,
        rownumWidth: 40,
        gridview: true,
        multiselect: false,
        paging: true,
        pager: jQuery('#pager2'),
        rowNum: 20,
        rowList: [10, 30, 50],
        scrollOffset: 0,
        sortname: 'Summary_Date',
        sortorder: "desc",
        viewrecords: true,
        caption: "Demo"
    });
});

using the following code to define the grid in HTML

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>

Page returns an empty grid with just column heading and without any data from rest service

when clicked on web service link, it returns following data

[
    {
        "Trans_ID": 1,
        "ACC_ID": 1,
        "Day_ID": 1,
        "Summary_Date": "2011-05-08",
        "Balance": 100.0
    },
    {
        "Trans_ID": 2,
        "ACC_ID": 2,
        "Day_ID": 1,
        "Summary_Date": "2011-04-08",
        "Balance": 50.0
    }
]

score 0 · Answer 1 · edited May 23 '17 at 10:29

You generate wrong data format for the grid. If you can't make any changes on the server side you should add jsonReader described in the answer.

In general the usage of the RESTful services not means that you should post full pure data. jqGrid is designed to support working with large dataset. So in the request send to the server there are additional parameters about the page needed to returned. Look at the answer which describes the problem more clear.

You use url: 'http://localhost:8001/resource/abc/entries' which is very bad. You should always use url in the form url: '/resource/abc/entries' or any other form without the hostname and the port number. Because of security reasons the ajax requests will be blocked if you will try to address another site or another port. I recommend you to use loadError handler to see which error your have. In the "UPDATED" part of the answer you will find the corresponding code including the demo project which you can download.

UPDATED: Here you can find an example how you can modify the code of jqGrid only to display the data produced by the server:

$("#list2").jqGrid({
    datatype: 'json',
    url: 'user755360.json',
    colNames: ['Trans ID', 'ACC ID', 'Day ID', 'Date', 'Balance'],
    colModel: [
        { name: 'Trans_ID', index: 'Trans_ID', key:true, width: 130, sorttype:'int' },
        { name: 'ACC_ID', index: 'ACC_ID', width: 100, sorttype:'int' },
        { name: 'Day_ID', index: 'Day_ID', width: 100, sorttype:'int' },
        { name: 'Summary_Date', index: 'Summary_Date', width: 90, formatter:'date',
          sorttype:'date' },
        { name: 'Balance', index: 'Balance', width: 85, formatter:'number',
          sorttype:'number' }
    ],
    rowNum: 20,
    rowList: [10, 30, 50],
    gridview: true,
    pager: '#pager2',
    rownumbers: true,
    viewrecords: true,
    jsonReader : {repeatitems: false,
        root: function(obj) {
            return obj;
        },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    },
    loadonce: true,
    sortname: 'Summary_Date',
    sortorder: "desc",
    height: "100%",
    caption: "Demo"
});

Empty Jqgrid when fetching json data from a restful web service using restx server

1 Answers1