How to add,edit,search,delete in jQgrid

Question

This is my jQgrid javascript.Here i want to add "addRow" method in jQgrid.i don't know where to place "addRow" method and how to give their action and parameter.

 function jqGridShow(){
      var lastsel2;
      var parameters;
        jQuery("#jqGrid01").jqGrid({

            url: "JqGridDemoJson.action",
            datatype:"json",
            height: 200,
            rowNum: 10,
            rowList: [10,20,30],


  colNames:['Inv No','Name'],
  colModel:[
             {name:'id',index:'id', editable: true,sorttype:"int",search:true},
             {name:'name',index:'name', editable: true,width:30}
            ],
            pager: "#jqGridPager01",
            viewrecords: true,
            add: true,
            edit: true,
            addtext: 'Add',
            edittext: 'Edit',
            caption: "Data",
            hidegrid:false,
            multiselect:true,

   onSelectRow: function(id){

      });


        // Setup buttons
        jQuery("#jqGrid01").jqGrid('navGrid','#jqGridPager01', 
                {edit:true,add:true,del:true,search:true}, 
                {height:200,reloadAfterSubmit:true}
        );



        // Setup filters
        jQuery("#jqGrid01").jqGrid('filterToolbar',{defaultSearch:true,stringResult:true});

        // Set grid width to #content
        $("#jqGrid01").jqGrid('setGridWidth', $("#content").width(), true); 

        // Bootstrap customization
        $(".ui-pg-input").attr('class', 'form-control'); 
    } 

i searched the details.i got the below one.but i use this code its not working. please help..

               parameters =
                   {
                      rowID : "new_row",
                      url:"addGroupLevel3.action",
                      initdata : {},
                      position :"first",
                      useDefValues : false,
                      useFormatter : false,
                      addRowParams : {extraparam:{}}

                   }  

            jQuery("#grid_id").jqGrid('addRow',parameters); 

Answer 1

For Add row in jqGrid

You can have a button, and in its click function, you can add row data in jqGrid, syntax as follows,

 jQuery("#grid_id").editGridRow( the_row_id, options ); 

Example: For button - html <input type="BUTTON" id="bedata" value="Edit Selected" />

javascript -

$("#bedata").click(function(){ 
 jQuery("#editgrid").jqGrid('editGridRow',"new",height:280,reloadAfterSubmit:false}); 
});

For further options, have a look over here, see under /LiveDataManipulation/Add row

For Edit row in jqGrid

For edit too, you can have a button same as add rowData and its javascript -

$("#bedata").click(function(){ 
     var gr = jQuery("#editgrid").jqGrid('getGridParam','selrow'); 
     if( gr != null ) jQuery("#editgrid").jqGrid('editGridRow',gr {height:280,reloadAfterSubmit:false}); 
     else alert("Please Select Row"); 
});

For further options, have a look over here, see under /LiveDataManipulation/Edit row

Same thing for Search (Searching Data) & Delete (Delete row)

You can also have all things in one place in footer, using navGrid like below example

jQuery("#editgrid").jqGrid('navGrid','#pagernav', {}, //options 
   {height:280,reloadAfterSubmit:false}, // edit options 
   {height:280,reloadAfterSubmit:false}, // add options 
   {reloadAfterSubmit:false}, //del options 
   {} // search options 
);

For this, you can have a look over Navigator under Live Data Manipulation Menu in that link.