title: Dynamic jqGrid displaying no data
body: <p>I am making jQuery UI dialogs open with jqGrids (local data at the moment) in them.  That part works but when I try to call my grid building function and attach it to a dynamically made <code>DIV</code>, I only get the shell of the <code>jqGrid</code> with the table headings but no data. Any ideas?  Here's the parred down source:</p>
  
  <pre><code>        var dialog_count = 0;
          var default_grid = {
                  datatype: "local", 
                  height: 80, 
                  rowNum: 10, 
                  rowList: [10,20,30], 
                  multiselect: true, 
                  rowList:[10,20,30], 
                  sortname: 'id', viewrecords: true, sortorder: "asc",
                  footerrow: true,
                  loadui: "block"
          };
          var randomNum = function(){
              return Math.floor(1000000 + Math.random() * 9000000);
          };
          var returnKeys = function(obj){
              var arr = [];
              for (var keys in obj[0]){
                  arr.push(keys)
              }
              return arr;
          };
          var createGrid = function(gridInfo,div){
              var gridKeys = returnKeys(gridInfo);
              if (typeof(div) !== "object"){
                  div = $('#'+div);
              }
  
              var details = $.extend({
                  data: gridInfo,
                  colModel: function(){
                      var arr = [];
                      var colnam = gridKeys;
                      $.each(colnam, function(index,value){
                          arr.push({name: value,index:value,width:80 })
                      });
                      return arr;
                  }()
              },default_grid);
              var rand = randomNum();
              var pager = 'pager'+rand;
              var str = '&lt;div id="'+pager+'"&gt;&lt;/div&gt;';
  
              var grid = div.append('&lt;table id="aGrid'+rand+'"&gt;&lt;/table&gt;'+str).find('#aGrid'+rand); 
              var grid_args = $.extend({pager: '#'+pager},details);
              console.log(div)
              grid.jqGrid(grid_args);
          };
  
          $.fn.createDialog = function(opts,titl,page,tpl){
              var custom = {
                  open: function(){ 
                      if(typeof(page) === "string"){
                          $(this).load(page);
                      }
                  },
                  title: titl
              }
  
              var veryCustom = $.extend(custom,opts);
  
              if(typeof(page) === "object"){
                  var container = $("body"),
                  divName = 'adiv'+dialog_count;
                  tpl = (tpl == undefined) ? '' : tpl,
                  dlg = container.append('&lt;div id="'+divName
                          +'"&gt;'+tpl+'&lt;/div&gt;').find('div#'+divName);
                  dlg.dialog(veryCustom);
  
                  if(page.length === 1){
                      createGrid(page[0],divName);
                  }
              }else{
                  $('&lt;div/&gt;').dialog(veryCustom);
              }
              dialog_count++;
          };
          var contentDialog = {
                  width: 700,
                  height: 200,
                  position: [200,300]
          };
          var grid3template = function(obj){
              var str = $('&lt;div class="meta"&gt; \
                  &lt;div class="someClass"&gt; \
                      yada yada \
                  &lt;/div&gt; \
                  &lt;div id="someDiv22"&gt;more text&lt;/div&gt; \
                  &lt;/div&gt;&lt;!-- end class meta --&gt; \
              '
              );
              createGrid(obj.grid3data, str.find("#someDiv22"));
              return str.html();
          };
  
  
     var grid1data = [ 
          {id:"&lt;a href='#' class='grid1click'&gt;63028&lt;/a&gt;",division:"school",ctype:"building",tnum:'$100',cdate:"2011-02-09",cust:"Big HS",country:"USA",state:"VA"},
      ];
      jQuery("#grid1").jqGrid({ 
          data: grid1data, 
          datatype: "local", 
          height: 80, 
          rowNum: 10, 
          rowList: [10,20,30], 
          colModel:[ 
              {name:'id',index:'id', width:60, sorttype:"int"}, 
              {name:'division',index:'division', width:72},
              {name:'ctype',index:'ctype', width:100}, 
              {name:'tnum',index:'tnum',width:50},
              {name:'cdate',index:'cdate', width:94, sorttype:"date", formatter:"date"}, 
              {name:'cust',index:'cust', width:90},
              {name:'country',index:'country', width:30},
              {name:'state',index:'state', width:30}
          ],
          multiselect: true, 
          rowList:[10,20,30], 
          caption: "Grid 1" ,
          pager: '#plistGrid1', 
          sortname: 'id', viewrecords: true, sortorder: "asc",
          loadui: "block"
      });
  
      var grid2data = [ {id:"&lt;a href='#' class='grid2click'&gt;1&lt;/a&gt;",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"} ];
  
      var grid3obj = {
          grid3data: [ {name:'&lt;span class="provclick"&gt;1st Action Services&lt;/span&gt;',ufoc:'AA2143',assoc:'Former Affiliate',city:'Austell',state:'GA',active:'Inactive'},{name:'281-Flooded, Inc.',ufoc:'351',assoc:'Member',city:'Houston',state:'TX',active:'Active'},{name:'Jim Davis Carpet Cleaning &amp; Restoration Services, Inc',ufoc:'AA2177',assoc:'Former Affiliate',city:'Terre Haute',state:'IN',active:'Inactive'},{name:'A Fantabulous Restore Co.',ufoc:'999',assoc:'Member',city:'Disasterville',state:'IN',active:'Active'},{name:'Stellar Restoration Services, Inc',ufoc:'399',assoc:'Affiliate',city:'Bloomington',state:'IL',active:'Active'},{name:'We Do Trees Inc.',ufoc:'778',assoc:'National Partner',city:'Forest Grove',state:'WY',active:'Active'}]
      };
  
      $('.grid1click').click(function(e){
          e.preventDefault();
          $(this).createDialog(contentDialog,"Grid 2",[grid2data]);
      });
  
      $('.grid2click').live('click',function(e){
                  e.preventDefault();
                  $(this).createDialog(contentDialog,'Grid 3',[],grid3template(grid3obj));    
      });
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>&lt;table id="grid1"&gt;&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;div id="plistGrid1"&gt;&lt;/div&gt;
  </code></pre>