Question

I’m using jqGrid to build a custom inline entry widget on a page. The relevant part of the jqjGrid setup is:

  colModel:[  {
         // Other columns removed.
    {name:'ship',index:'ship', width:90, editable: true, sortable: false, 
            edittype: "custom",
            editoptions:{ custom_element: customElement, 
                            custom_value: customValue} }
    ], 

And my callback function is:

function customElement(value, options) {
    var a = $("<input>").attr({ 
                type: 'text', 
                size: 2,
                value: value,
                style: 'float: left'
        }).add(
            $("<span>").attr({ 
                style: 'float: left; margin-top: 2px;',
                'class': 'ui-icon ui-icon-search'
        }).click(function() {
                    // My custom function here.
           })
        ).appendTo($("<div>"));

    return a;
}

This all works properly.

However, I’m building a library to manage several jqgrid tables on a page. I’d like to use the same function to build the custom elements on several of those tables. The problem is that this particular click() function needs to know which jquery table it’s dealing with.

I can get the table ID through a hacky way at the beginning of customElement and pass it in the closure to the function:

var fieldID = options.id;
var rowID = fieldID.replace(/_.*/, "");
var containingTable = $("#" + rowID + "_id").closest("table");

But this assumes that the column “id” exists in the current jqGrid, and it’s an earlier (leftward) column. I can’t use the “ship” column because it hasn’t been created yet. I can’t assume there are other rows in the table that would have a “ship” column either.

How can I, in a custom_element handler, reliably get a handle to the “calling” table?

Answer 1

I agree that it’s a problem in the current code of jqGrid. There are no simple and elegant way to get the id of the grid for which the control are created.

One workaround you already suggested. I can suggest you one more version to get the id of “the calling table”.

Custom element can be used for every editing mode: inline editing, form editing and cell editing. The click handle receive Event object e

.click(function(e) {
    // My custom function here.
})

which you can to detect the id of the “the calling grid”. In case of inline editing or cell editing the detection is the most easy. It will be

.click(function(e) {
    var $grid = $(e.target).closest('table.ui-jqgrid-btable');
    ...
})

Inside of click event handler of the form editing you can use

.click(function(e) {
    // you can do the following
    var $t = $(e.target).closest('table.EditTable'),
        tid = $t.attr('id'); // id=TblGrid_list
    if (typeof tid === "string" && tid.substr(0, 8) === 'TblGrid_') {
        var gridId = tid.substr(8);
    }
    var grid = $('#' + $.jgrid.jqID(gridId));

    // or the following
    var $f = $(e.target).closest('form.FormGrid'),
        fid = $f.attr('id');   // id=FrmGrid_list
    if (typeof fid === "string" && fid.substr(0, 8) === 'FrmGrid_') {
        var grid_id = tid.substr(8);
    }
    var mygrid = $('#' + $.jgrid.jqID(grid_id));
    ...
})

The code above use the fact that the editing form contains two elements which ids will be constructed based on the id of the grid: the <table> element inside of the editing form has the id=”TblGrid_list” if the grid id=”list” and the <form> element has the id=”FrmGrid_list”.

The usage of $('#' + $.jgrid.jqID(gridId)) is more safe as $('#' + gridId) because it gives correct results in case when the grid id contain meta characters. The jqID function is very easy (see here). It makes just escaping of the meta characters used in the jQuery selector.