CODEWITHSUNDEEP
jqueryjsonjqgrid
Gerry Loiacono
Gerry Loiacono

Reputation: 3

jqGrid and JSON - empty grid

I must be missing something simple here. I have studied all the examples, and copied relevant code, but I cannot get any JSON data to display in the jqGrid - I just get an empty grid with headers. I would appreciate others sets of eyes to help me figure out what is wrong. Thank you.

Here is the html file I am using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/Styles/ui.jqgrid.css" />
    <script src="/Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            $('#list').jqGrid({
                dataType: "jsonstring",
                datastr: mydata1,
                contentType: "application/json; charset=utf-8",
                colNames: ['Id1', 'Name1', 'Values1'],
                colModel: [
                    { name: 'id1', index: 'id1', width: 55 },
                    { name: 'name1', index: 'name1', width: 80, align: 'right', sorttype: 'string' },
                    { name: 'values1', index: 'values1', width: 80, align: 'right', sorttype: 'string'}],
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [10, 20, 30],
                viewrecords: true,
                caption: 'jqGrid First Grid',
                width: 300
            });
        });
        var mydata1 = '{ "page": "1", "total": 1, "records": "4", "rows": [{ "id": 1, "cell": ["1", "cell11", "values1"] }, { "id": 2, "cell": ["2", "cell21", "values1"] }, { "id": 3, "cell": ["3", "cell21", "values1"] }, { "id": 4, "cell": ["4", "cell21", "values1"] } ]'
    </script>
</head>
<body>
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"> 
    </table> 
    <div id="pager" class="scroll" style="text-align: center;"> 
    </div> 
</body>
</html>

Upvotes: 0

Views: 1472

Answers (1)

Oleg
Oleg

Reputation: 221997

You code have at least two errors:

  1. You use dataType option instead of datatype. So unknown option dataType: "jsonstring" will be ignored and be used default datatype: "xml" option and url: "". So no data will be loaded.
  2. Your JSON data has no '}' at the end of the string. So you use wrong JSON data.

Some other remarks.

  • There not exist any contentType parameter. It will be ignored.
  • It's better to define mydata1 inside of (at the beginning of) jQuery(document).ready(function () {/*here*/});. In the case you will have no global variables which are slow and can has conflicts with other global variables.
  • It's better to use pager: '#pager' instead of pager: jQuery('#pager')
  • You can remove class="scroll" cellpadding="0" cellspacing="0" attributes of the <table> element and class="scroll" style="text-align: center;" attributes of the <div id="pager">

See the demo.

Upvotes: 2

Related Questions