hardcoding button inside jqgrid column

Question

I would like to keep a button inside the jqgrid in the first column.

$(document).ready(function() {
            var grid = $("#list"),
                mydata = [
                {col1:"need a button here",col2:"val1",col3:"val2"},
                {col1:"need a button here",col2:"val1",col3:"val2"},
                {col1:"need a button here",col2:"val1",col3:"val2"},
 ];
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['A','B','C'],
                colModel:[
{name:'col1',index:'col1',key: true,width:100,sorttype:"text"},
{name:'col2',index:'col2',key: true,width:100,sorttype:"text"},
{name:'col3',index:'col3',key: true,width:100,sorttype:"text"},
 ],
                search:true,
                pager:'#pager',
                jsonReader: {cell:""},
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                height: "38%",
                caption: "Add Button"
            });

I need a button in the first column which is col1. I tried adding a button in grid complete function after the height property.

gridComplete: function(){
    var ids = $("#list").jqGrid('getDataIDs');
    for(var i=0;i < ids.length;i++){
        var cl = ids[i];
        be = "<input style='height:22px;' type='button' value='clickme'/>";
        $("#list").jqGrid('setRowData',ids[i],{act:be});
    } 

It doesn't work. Can someone please help with this?

Thanks.

Answer 1

You could use custom_formatter for that. Your definition for the first column would look like this:

{name:'col1',index:'col1',key: true,width:100,sorttype:"text",formatter:buttonFunction},

Then you should define formatter JavaScript function which will render your button:

function buttonFunction(cellvalue, options, rowObject)
{
   // some business logic for each row
   return "<input style='height:22px;' type='button' value='clickme'/>";
}