json jquery grid (using django) - having problems presenting the data

Question

Hi,

I'm trying this source where jqGrid gets some json data from django: link

Unfortunately the data is not presented in the jqgrid, only an empty jqgrid.

I'm rendering the jqgrid with this call:

<script type="text/javascript">
    $(function () {
        $.getJSON("{% url myapp.views_json.grid_config %}", function(data){
            $("#mygrid")
                .jqGrid(data)
                .navGrid('#pager', 
                    {add: false, edit: false, del: false, view: true},
            {}, // edit options
            {}, // add options
            {}, // del options 
            { multipleSearch:true, closeOnEscape:true }, // search options 
            { jqModal:false, closeOnEscape:true} // view options 
            );
        });
    });
</script>

{% url myapp.views_json.grid_config %} is resolved to the url "projects/examplegrid/cfg/". When I call this URL in my browser it returns JSON data. Please follow the link to see it. json config data

This should be ok. I guess.. In this json data file you see an url: http://127.0.0.1:8000/pm/projects/examplegrid/ This url returns also json data. This is the json representation of the data that I want to present. See this json data set here: link

Here is a screenshot of the resulting jqgrid. link I know it's probably tough to help me out here. But it seems to me as that my problem is on the jqgrid side and I think there are a lot of cracks outside who know who to deal with it. I do not :-)

Edit: The undefined error is gone. This error was due a missing reference to a local file:

 <script type="text/javascript" src="http://localhost:8000/media/js/i18n/grid.locale-en.js"&gt;&lt;/script&gt; 

But the next error is, that it shows "Loading" and it does not finish. Anybody knows what the problem could be?

Edit: The errow was obviously that the jqgrid was not initialised correctly. I used the wiki page proposed by CalebD and it works now. At least the json data is presented in the grid. I'm wondering now what I have to do in order to update a row.

<script type="text/javascript">
    jQuery(document).ready(function(){ 
      jQuery("#grid").jqGrid({
          url:'http://127.0.0.1:8000/pm/projects/examplegrid/',
          datatype: "json",
          mtype: 'GET',
          colNames:['id', 'description'],
          colModel:[
                    {name:'id',index:'id', width:55, sortable:false, editable:false, editoptions:{readonly:true,size:10}},
                    {name:'description',index:'description', width:300, editable:true},
               ],
         jsonReader : {
              repeatitems:false
         },
          rowNum:10,
          rowList:[10,20,30],
          pager: jQuery('#gridpager'),
          sortname: 'name',
          viewrecords: true,
          sortorder: "asc",
          caption:"Wines",
          editurl:"http://127.0.0.1:8000/pm/projects/examplegrid/"
     }).navGrid('#gridpager');
    });
</script>

Answer 1

The parameter for .jqGrid excepts a JS object that describes settings for the grid, not JSON data. You have to define the data type, columns, and column models, among other options. The jqGrid wiki has some examples:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:conventions

If you scroll down, there is an example using JSON.