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

http://jsfiddle.net/russcam/VxpHf/ – understack Jun 05 '11 at 11:19 — understack, Jun 05 '11 at 11:19

score 16 · Answer 1 · edited Sep 28 '12 at 16:10

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.

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 — , Aug 20 '09 at 13:05
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! — Craig Stuntz, Aug 20 '09 at 13:10

user406905 · Answer 2 · 2011-03-22T21:39:33.933

8

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.

edited Mar 22 '11 at 21:39

answered Jan 20 '11 at 01:12

user406905

1,418
15
16

score 6 · Answer 3 · edited Apr 16 '14 at 01:52

6

in colModel , you can format using formatter by following code

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

edited Apr 16 '14 at 01:52

timbrown

572
6
12

answered Aug 15 '13 at 03:04

Kishore Kumar

909
2
10
15

score 0 · Answer 4 · answered Jul 11 '13 at 19:53

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.

score 0 · Answer 5 · edited May 23 '17 at 12:16

0

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

edited May 23 '17 at 12:16

Community

1
1

answered Jun 05 '11 at 11:08

understack

11,212
24
77
100

your examples are all related to the navigation bar. The enquirer asked for a button in a data row. – lszrh Aug 10 '11 at 21:41

Adding a button to a row in jqgrid

5 Answers5

Linked