jqgrid

[nesmago]

hola, estoy comenzando a utilizar jqgrid para mostrar los datos de una base de datos, ahora bien lo que todavia no se como implementar son los botones de edicion, el de agregar y el de eliminar, los defino que salgan en el navgrid, pero no el de agregar me sale un cuadro vacion, y no se como mandar los datos a mi servlet.

este es el codigo de mi jqgrid

Código Javascript:

function fillGridOnEvent(){
                    $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
                    jQuery("#list").jqGrid({
                        url:'<%=request.getContextPath()%>/TablaProductoServlet?q=1&action=fetchData',
                        datatype: "xml",
                        height: 250,
                        colNames:['No Producto.','Codigo','Nombre ','Precio V','Precio C','Stok','Cat','Descripcion',"Action"],
                        colModel:[
                            {name:'NP',index:'NP', width:40,sortable:true, editable:false, editoptions:{width:20} },
                            {name:'CP',index:'CP', width:50,sortable:false, editable:true, editoptions:{width:20}},
                            {name:'NOP',index:'NOP', width:190,sortable:false, editable:true, editoptions:{width:20}},
                            {name:'PPV',index:'PPV', width:50,sortable:false, editable:true, editoptions:{width:20}},
                            {name:'PPC',index:'PPC', width:50,sortable:false, editable:true, editoptions:{width:20}},
                            {name:'PS',index:'PS', width:30,sortable:false, editable:true, editoptions:{width:20}},
                            {name:'PNC',index:'PNC', width:30,sortable:false, editable: true,edittype:"select",editoptions:{value:"1:1;2:2"}},
                            {name:'PD',index:'PD', width:100,sortable:false, editable:true, editoptions:{width:20}},
                            {name:'view',index:'view', width:50,sortable:false}
                        ],
                        multiselect: false,
                        paging: true,
                        rowNum:10,
                        rowList:[10,20,30],
                        pager: $("#page"),
                        loadonce:true,
                        
                        viewrecords: true,
                        height: "100%",
                        caption: "Student Details"
                            
                    }).navGrid('#page',{edit:true,add:true,del:true});  
                }
                jQuery().ready(function (){
                    //fillGrid();
                });
 

agradeceria un ejemplo de como definir las otras funciones.