Blog del programador: Problema de carga de datos locales de JQuery JQGrid

Tengo un problema con el siguiente código.

<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>

Y en el cuerpo....

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

Con este código, nunca muestro los datos en la cuadrícula. Alguien tiene una idea sobre este tema?
Gracias.

Solución del problema

Su código funciona bien. Puede publicar su html completo aquí.. verifique la captura de pantalla de salida aquí texto del enlace
Aquí está el html completo

<!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>