john
john

Reputation:

Adding a button to a row in jqgrid

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

Upvotes: 17

Views: 55128

Answers (5)

Kishore Kumar
Kishore Kumar

Reputation: 939

in colModel , you can format using formatter by following code

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

Upvotes: 6

humbolight
humbolight

Reputation: 690

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.

Upvotes: 0

Craig Stuntz
Craig Stuntz

Reputation: 126587

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.

Upvotes: 16

understack
understack

Reputation: 11590

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

Upvotes: 0

user406905
user406905

Reputation: 1418

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.

Upvotes: 8

Related Questions