jqGrid - Adding, deleting and editing rows on navigator

Question

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 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator but I can't find how I specify the form with the columns I want. Here is my code:

customGrid.js

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}); 
}); 

};

Answer 1

You need just add editable: true property in colModel for columns which you want to edit. $('edit').click event handle need be removed because navGrid will do all the job.

I recommend you additionally remove all index properties from colModel, remove non-existing property sorttype:"boolean" (see the documentation). Instead of that it's good to add the options gridview: true and autoencode: true to the list of jqGrid options and consider to replace height: 250 to height: "auto".