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

Freespoken

jsfiddle.net/russcam/VxpHf – Galvanic

Answer 1

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.

Messer

that will only enable buttons for Save,editing , what I want is to fire a function that opens the new window. I guess I just override the .saveRow or .EditRow – Freespoken

You add a button the exact same way, but you put a different JavaScript method in the onclick. No, you do not override saveRow or editRow. That would break editing! – Messer

Don't forget adding at the jqgrid config autoencode:false – Cora

Answer 2

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.

Lax

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'\>";
}

Hildebrandt

Answer 4

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

Galvanic

your examples are all related to the navigation bar. The enquirer asked for a button in a data row. – Darryl

Answer 5

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.

Nonalignment