Adding a button to a row in jqgrid

Question

I want to add a button to each row in my grid that will bring up a new window. Do not see this feature in this very rich control. Must be missing something

Answer 1

the current highest answer places the custom button code within loadComplete. it shoudl be gridComplete. The API has likely been changed since the question was answered.

Answer 2

This example might be helpful. See this wiki page and this answer from Oleg.

Answer 3

in colModel , you can format using formatter by following code

formatter:function (cellvalue, options, rowObject) {    
    return "<input type='button' value='somevalue' onclick='some_function'\>";
}

Answer 4

I am using a jqgrid to display a list of contacts. I have a column named 'Role' with a button that says 'Define', such that you can click on it and redefine that contact's role as primary, secondary, sales, or other.

Originally, the button element was being sent to the grid cell via XML, where $rowid was the id of the row (PHP):

<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell> 

This worked fine until I set autoencode: true on the grid. With this option set to true, the column was simply displaying the html.

Craig's answer displayed similar behavior, but a slight variation of it did the trick. I thought I'd share:

gridcomplete: function() {
    var ids = $grid.getDataIDs();

    for (var i=0;i<ids.length;i++){
        var cl = ids[i],
        button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
        if (cl.substr(0,2) !== "jq") {
            $('#'+cl).find('td[aria-describedby="list_role"]').html(button);
        }
    }
}

In other words, the setRowData method didn't work with autoencode set to true, but the DOM can be manipulated as desired within the gridcomplete event.

Answer 5

Here's one example, from the jqGrid demos page:

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], 
    imgpath: gridimgpath, 
    pager: jQuery('#prowed2'), 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    gridComplete: function(){ 
        var ids = jQuery("#rowed2").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+"); ></ids>"; 
            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").setRowData(ids[i],{act:be+se+ce}) 
        } 
    }, 
    editurl: "server.php", 
    caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false}); 

You can also do it with a custom formatter.