jqgrid: How to get column index use custom formatter

Question

How to get column index use custom formatter.

In column «Tax» i try use custom formatter. Need get column index value and row index value. I can get irow parameter irow = options.rowid but problem with getting icol parameter.

This is my example:

    var $grid = $("#grid");

    $grid.jqGrid({
        datatype: "local",
        height: 250,
        colNames:[' ', 'Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
        colModel:[
            {name: 'myac', width:80, fixed:true, frozen: true, sortable:false, resize:false, formatter:'actions',
            formatoptions:{keys:true}},
            {name:'id',index:'id', width:60, sorttype:"int", frozen: true},
            {name:'invdate',index:'invdate', width:90, sorttype:"date", frozen: true, editable: true},
            {name:'name',index:'name', width:100, editable: true, editable: true},
            {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
            {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true,

                 formatter: function(cellvalue, options) {
                    var id = options.rowId;
                    var col;

                    return id ?
                           '<span class="editable" data-id="' + id  + '" data-col="' + col + '">$' + cellvalue + '</span>' :
                           cellvalue;
                }

            },      
            {name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},      
            {name:'note',index:'note', width:150, sortable:false, editable: true}       
        ],
        rowNum:10,
        width:700,
        rowList:[10,20,30],
        pager: '#pager',
        sortname: 'invdate',
        viewrecords: true,
        sortorder: "date",
        shrinkToFit: false,
        rownumbers: true,
        caption: "Frozen Column with Group header and custom cell formatter",
        height: 'auto',
        frozen : true
    });

    var mydata = [
        {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];


    for(var i=0;i<=mydata.length;i++) $grid.jqGrid('addRowData',i+1,mydata[i]);

    $grid.jqGrid('setGroupHeaders', {
      useColSpanStyle: true, 
      groupHeaders:[
        {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
      ] 
    });

    $grid.jqGrid('setFrozenColumns');

Use click cell event i can get col and row index.

    $grid.click(function(e) {
        var el = e.target;
            if (el.nodeName !== "TD") {
                el = $(el,this.rows).closest("td");
            }
        var iCol = parseInt($(el).index());
        var row = $(el,this.rows).closest("tr.jqgrow");
        var rowId = parseInt(row[0].id);

            alert ("rowId="+rowId+"; iCol="+iCol+";");

Answer 1

First of all please never use addRowData to make initial filling of jqGrid having datatype: "local". Instead of that you can move the line with var mydata = [...]; at the begining of your code and add data: mydata to the list of parameters of jqGrid.

Now about your main question: options parameter of the custom formatter have 4 properties:

• grid property - hold the string with represent the id of the grid. It's "grid" in your case.
• pos property - it's the index of the column in colModel. It will be 6 in your case. So options.pos is the answer on your question.
• rowId property - it's the rowid of the row which will be built now
• colModel property - it's the object which represent the item im colModel with the index options.pos.

Additionally jqGrid initialize this to the DOM element of the grid exactly like in case of calling any callbacks. So $(this).jqGrid("getGridParam") for example or this.p will get you the options of jqGrid.

Answer 2

There is a callback function of jqgrid : onselectcell. In that you can get col index

onCellSelect : function(rowId, iCol, cellcontent,e) {
    var col = $("#grid").jqGrid("getGridParam", "colModel");
    var colName = col[iCol]['index'];

}