Question

I’m using the jQuery plugin that generates interactive tables called jqGrid.

I want to use this “editfunc” (2/3rds or 3/4ths down the page) but I can’t find a clear example of how to implement it anywhere. I’ve attempted several differnt things and all of them leave me with total failure.

To be clear, the table generated looks something like this:

That lower bar is called the “navpbar” or “pager”, you implement it as a separate DIV, the API and documentation is fairly unclear (to myself anyway) on how exactly I put a custom function onto those buttons such as “add”, “edit”, “delete”, etc… I can get default functionality working, but I can’t find anything through websearches, this site, or the API docs on what the actual implementation looks like.

Answer 1

jqGrid has opened source. It helps to clear all questions directly in the code. Look at the lines for example. You will see what navGrid do on click on the ‘Edit’ button of the navigator:

var sr = $t.p.selrow;
if (sr) {
    if($.isFunction( o.editfunc ) ) {
        o.editfunc(sr);
    } else {
        $($t).jqGrid("editGridRow",sr,pEdit);
    }
} else {
    $.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$t.p.id,jqm:true});
    $("#jqg_alrt").focus();
}

So if you define editfunc callback function the function will be called with id of selected row as the parameter instead of creating editing dialog by editGridRow.

The method editGridRow have many customization functionality. The prmEdit parameter of the navGrid allow to specify any option used by editGridRow.

If you don’t want do display editing form and display any other GUI instead you can use editfunc callback function. For example:

$("#list").jqGrid('navGrid', '#pager', {
    editfunc: function (rowid) {
        alert('The "Edit" button was clicked with rowid=' + rowid);
    }
});

See the demo. Select a row and click on the “Edit” button and you will see the alert instead of the standard editing form.