'JQuery JQGrid local data loading issue

I've got a problem with the following code

<script type="text/javascript">
var mydata = [ {id:"1",name:"foo"},{id:"2",name:"bar"}  ];

jQuery(document).ready(function() {
jQuery("#lgrid").jqGrid({ data: mydata, 
                    datatype: "local", 
                    height: 150, 
                    width:600,
                    rowNum: 10, 
                    rowList: [10,20,30], 
                    colNames:['id','name'], 
                    colModel:[  {name:'id',index:'id', width:60, sorttype:"int"},
                                {name:'name',index:'name', width:60}], 
                    pager: "#pgrid", 
                    viewrecords: true, 
                    caption: "Contacts" });

});

</script>

And In the body ....

<table id="lgrid"></table>
<div id="pgrid"></div>

With this code, I never display the data into the grid. Somebody has an idea about this issue ?
Thanks.

jqueryjqgrid


Solution 1:[1]

Your code does works fine. You can post your complete html here.. check the output screenshot here link text Here is the complete html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>test</TITLE>
<link type="text/css" href="lib/jquery/css/overcast/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/jqgrid/css/ui.jqgrid.css" />
<script type="text/javascript" src="lib/jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.8.2.custom.min.js"></script>
<script src="lib/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="lib/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script type="text/javascript">
    var mydata = [ {id:"1",name:"foo"},{id:"2",name:"bar"}  ];

    jQuery(document).ready(function() {
    jQuery("#lgrid").jqGrid({ data: mydata, 
                        datatype: "local", 
                        height: 150, 
                        width:600,
                        rowNum: 10, 
                        rowList: [10,20,30], 
                        colNames:['id','name'], 
                        colModel:[  {name:'id',index:'id', width:60, sorttype:"int"},
                                    {name:'name',index:'name', width:60}], 
                        pager: "#pgrid", 
                        viewrecords: true, 
                        caption: "Contacts" });

    });

    </script>

</HEAD>
<BODY>
<table id="lgrid"></table>
<div id="pgrid"></div>

</BODY>
</HTML>

Solution 2:[2]

Try to set localReader: { repeatitems: false } in jqGrid options object.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 STO

Related Questions