jqGrid - determine name of column on right click of a column in jqGrid

Question

I want the name of the column on right click of a column header in jqGrid. Any code would be appreciated.

Answer 1

You can bind contextmenu event to all column headers. Every header is <th> element and so its DOM support cellIndex property. The cellIndex property gives you the index of column header. If you would use the same index in colModel you will get the definition of the column. The name property gives you the column name.

The corresponding code could be about the following:

var cm = $grid.jqGrid("getGridParam", "colModel");
$("th.ui-th-column", $grid[0].grid.hDiv).bind('contextmenu', function(e) {
    var $th = $(e.currentTarget).closest("th");
    if ($th.length > 0) {
        alert("the header of the column '" + cm[$th[0].cellIndex].name +
            "' was clicked");
        e.preventDefault(); // don't display standard context menu
    }
});

The demo uses the code. Just use the right mouse click on the column header and you will see the results:

Answer 2

All jqGrid cells have an aria-described-by property which is composed of gridId_columnname. You can use this to get your column name.

For grid cells..

var cellName = $(e.target).closest('td').attr('aria-described-by');
var gridId = 'list1';

var columnName = cellName.substr(gridId.length - 1);

For column headers, besides Oleg's answer, you can do this..

var header = $(e.target).closest('th')
var gridId = 'list1';

var columnName = header.attr('id').substr(gridId.length - 1);