Best way to add buttons in jqGrid?

Question

I would like to know the best way to create a column of buttons using jqGrid? Because I saw that it is possible to do this through the creation of attribute formatter in row of colModel or using gridCOmplete method, but did not see anywhere which best way suited for this problem.

In this link is explained how to use the formatter.

<script>
jQuery("#grid_id").jqGrid({
...
colModel: [ 
... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
 ...
   ]
...
});

function currencyFmatter (cellvalue, options, rowObject)
{
   be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cellvalue+"');\"  />"; 
   se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cellvalue+"');\"  />"; 
   ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cellvalue+"');\" />"; 
   return be+se+ce;
}
</script>

And this link is used the gridComplete (go to Row Editting (new) -> Edit Custom)

Java Script code
...
jQuery("#rowed2").jqGrid({
    url:'server.php?q=3',
    datatype: "json",
    colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'act',index:'act', width:75,sortable:false},
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90, editable:true},
        {name:'name',index:'name', width:100,editable:true},
        {name:'amount',index:'amount', width:80, align:"right",editable:true},
        {name:'tax',index:'tax', width:80, align:"right",editable:true},        
        {name:'total',index:'total', width:80,align:"right",editable:true},     
        {name:'note',index:'note', width:150, sortable:false,editable:true}     
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#prowed2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    gridComplete: function(){
        var ids = jQuery("#rowed2").jqGrid('getDataIDs');
        for(var i=0;i < ids.length;i++){
            var cl = ids[i];
            be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\"  />"; 
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\"  />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />"; 
            jQuery("#rowed2").jqGrid('setRowData',ids[i],{act:be+se+ce});
        }   
    },
    editurl: "server.php",
    caption:"Custom edit "
});
jQuery("#rowed2").jqGrid('navGrid',"#prowed2",{edit:false,add:false,del:false});

I thought the first way more simple, therefore my question.