title: jqGrid - Adding, deleting and editing rows on navigator
body: <p>I'm trying to add/delete/edit rows when I click on the icons on the navigator. For example, if I click on the Add button, I'd like to show the form with the columns I've set in colNames, but I don't know how to do it. I've read the wiki <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator" rel="nofollow">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator</a> but I can't find how I specify the form with the columns I want. Here is my code: </p>
  
  <p>customGrid.js</p>
  
  <pre><code>function criaGrid(){
  
  $("#grid").jqGrid({
      datatype: 'json',
      url: 'dadosGrid.jsp',
      jsonReader: {repeatitems: false, root: 'root'},
      pager: '#paginado',
      rowNum: 10,
      rowList: [10,20,30],
      emptyrecords: "Não há registros.",
      recordtext: "Registros {0} - {1} de {2}",
      loadtext: "Carregando...",
      pgtext: "Página {0} de {1}",
      height: 250,
      colNames:['Código','Nome', 'Ativo', 'Data Inclusão','Login','Email'],
      colModel:[
          {name:'codigo',index:'codigo', width:80, sorttype:"int"},
          {name:'nome',index:'nome', width:120},
          {name:'ativo',index:'ativo', width:80, sorttype:"boolean"},     
          {name:'dataInclusao',index:'dataInclusao', width:120, sorttype:"date", datefmt: 'd-M-Y'},
          {name:'login',index:'login', width:80, sortable:false},      
          {name:'email',index:'email', width:150, sortable:false} 
      ],
      multiselect: true,
      viewrecords: true,
      editurl:"someurl.php",
      caption: "Área"
  });
  
  
  $("#grid").jqGrid('navGrid','#paginado',{id:'edit',id:'add',id:'del',search:false,refresh:false})
  
  $('edit').click(function(){ 
      $("#grid").jqGrid('editGridRow',"new",{height:250,reloadAfterSubmit:true}); 
  }); 
  
  };
  </code></pre>