using custom formatters with jqgrid setCell

Question

So I'm trying to set cells on the fly, but I have a number of custom formatters for my grid, for example:

formatter: function(cellvalue, options, rowObject) {
                    if (rowObject.myId){
                        return '<span class="editable" data-id="' + rowObject.myId  + '">$' + cellvalue + '</span>';
                    }
                    else{
                        return cellvalue;
                    }
                }

and at some point after grid complete I want to do:

$('#table').jqGrid('setCell', 1,'colName', '500', 'test');

However, the problem is that this over writes the formatter and just replaces the whole thing with that cell value. Is there a way to make it go back through the custom formatter or some other way to solve this?

sample data:

{"metaData":null,"records":[{"spendD1":2520.88,"spendD2":0,"cpaD1":11.95,"cpaD2":0,"conversionsD1":211,"conversionsD2":0,"conversionRateD1":11.00,"conversionRateD2":0.00,"clicksD1":1872,"clicksD2":0,"cpcD1":1.35,"cpcD2":0,"statusId":1,"statusName":"Active","creativesCount":0,"adGroupsCount":0,"keywordsCount":0,"queryTermsCountD1":0,"queryTermsCountD2":0,"trafficSourcesCount":0,"campaignId":6824,"adgroupId":151464,"adgroupName":".com General Credit Offers","bid":2.000}]}

EDIT grid params:

altRows
    false

altclass
    "ui-priority-secondary"

autoencode
    false

autowidth
    false

beforeProcessing
    null

beforeSelectRow
    null

caption
    ""

cellEdit
    false

cellLayout
    5

cellsubmit
    "remote"

cmTemplate
    Object {}

colModel
    [Object { name="adgroupName", index="adgroupName", width=240, more...}, Object { name="campaignStatus", index="campaignStatus", width=60, more...}, Object { name="spendD1", index="spendD1", width=80, more...}, 8 more...]

colNames
    ["Ad Group", "Status", "Spend", 8 more...]

data
    []

datatype
    "json"

deselectAfterSort
    true

direction
    "ltr"

disableClick
    false

editurl
    null

emptyrecords
    "No records to view"

footerrow
    true

forceFit
    false

gridstate
    "visible"

gridview
    false

grouping
    false

groupingView
    Object { groupField=[0], groupOrder=[0], groupText=[0], more...}

headertitles
    false

height
    "100%"

hiddengrid
    false

hidegrid
    true

hoverrows
    true

id
    "advertiser_table"

idPrefix
    ""

ignoreCase
    false

jsonReader
    Object { root="records", page="pageNumber", total="totalPages", more...}

keyIndex
    false

lastpage
    1

lastsort
    2

loadBeforeSend
    null

loadError
    null

loadonce
    false

loadtext
    "Loading..."

loadui
    "enable"

localReader
    Object { root="rows", page="page", total="total", more...}

mtype
    "GET"

multiboxonly
    false

multikey
    false

multiselect
    false

multiselectWidth
    20

nv
    0

onHeaderClick
    null

onPaging
    null

onRightClickRow
    null

onSelectAll
    null

onSelectRow
    null

ondblClickRow
    null

page
    1

pager
    ""

pagerpos
    "center"

pgbuttons
    true

pginput
    true

pgtext
    "Page {0} of {1}"

postData
    Object { _search=false, nd=1331821970112, rows=20, more...}

prmNames
    Object { page="page", rows="rows", sort="sidx", more...}

reccount
    2

recordpos
    "right"

records
    2

recordtext
    "View {0} - {1} of {2}"

remapColumns
    []

resizeclass
    ""

rowList
    []

rowNum
    20

rowTotal
    null

rownumWidth
    25

rownumbers
    false

savedRow
    []

scroll
    false

scrollOffset
    18

scrollTimeout
    40

scrollrows
    false

search
    false

selarrrow
    []

selrow
    null

shrinkToFit
    true

sortable
    Object { update=function()}

sortname
    "spendD1"

sortorder
    "desc"

subGrid
    false

subGridModel
    []

subGridWidth
    20

tblwidth
    1233

toolbar
    [false, ""]

toppager
    false

totaltime
    9

treeANode
    -1

treeGrid
    false

treeGridModel
    "nested"

treeReader
    Object {}

tree_root_level
    0

url
    "/advertiser_services/amp/report/adgroup/get"

useProp
    true

userData
    Object { spendD1=2520.88, spendD2=0, cpaD1=11.95, more...}

userDataOnFooter
    true

viewrecords
    false

viewsortcols
    [false, "vertical", true]

width
    1233

Answer 1

First of all I am not sure why you need such formatter. The attribute with data-id can be accessed only if one has the cell element as DOM or as jQuery object myCell, but in the case $(myCell).closest("tr.jqgrow").attr("id") will get you the rowid.

Nevertheless the problem which you describe is common.

I would recommend you rewrite the code of formatter as

formatter: function(cellvalue, options) {
    var id = options.rowId;
    return id ?
           '<span class="editable" data-id="' + id  + '">$' + cellvalue + '</span>' :
           cellvalue;
}

The problem which you have is problem in the design of the custom formatter. Especially it will be clear if one loads the data from the server in the standard format with the data for the row like

{"id" :"1", "cell": ["cell11", "cell12", "cell13"]},

and the usage of loadonce: true additionally. In the case the rowObject at the first grid load will be Array like

["cell11", "cell12", "cell13"]

At the next grid refresh the data will be already in the format like

{_id_: "1", colName1: "cell11", colName2: "cell12", colName3: "cell13"}

In case of usage of setCell the formatter will be called with rowObject in the third format. How you can see from the source code of setCell the rowObject will be initialized as $('#table')[0].rows.namedItem(rowid). The rowObject will be DOM element which corresponds to the <tr> from the current row. So to get the cell contain you have to use something like

var cellData = $(rowObject).children('td:eq(' + iCol + ')').text();

where iCol in the index in the colModel for the column which you need. You can use getColumnIndexByName to get the index (see the answer for example).