0

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
Evan
  • 5,975
  • 8
  • 34
  • 63

1 Answers1

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).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • im not sure this answers the question. i know how to get the cell value, but the problem is i am changing the html structure of the cell, so i lose the original formatting. (i add in an input box and the user can input a new value for the cell, etc etc) also the id that im putting in there is not the rowObject id, but rather a different id that is coming from the server which i need for saving the new cell value. – Evan Mar 15 '12 at 14:08
  • @Evan: In the case you have to follow the last suggestion with `children`. You should post more full definition of the grid. How I explained you it's important to know which `datatype` you use: local or remote ('xml', 'json'), whether you use `loadonce:true` and so on. So just append your question with the full definition of jqGrid and the example of the data which you use to fill the grid. – Oleg Mar 15 '12 at 14:22
  • added grid params and some sample data – Evan Mar 15 '12 at 14:39
  • @Evan: Could you post just JavaScript code? It's important to post definition of the column where you use the formatter and the definition of the `myId`. The "sample data:" which you posed don't contain `myId` too. The code like `"more..."` inside of `jsonReader` give no information. If you generate the page in any way you still can open the source of the page and see the *real* JavaScript code which will be executed. – Oleg Mar 15 '12 at 14:46
  • te source would be useless, we are using a lot of different objects from different files to generate the grid. its basically unreadable – Evan Mar 15 '12 at 15:01
  • @Evan: Sorry, but the current code which you posted is unuseful too. You wrote question about the custom formatter which will be used for come column in `colModel` and which use another `myId` column of `colModel`. The code which you posted don't contain definition of any from the columns and the data which you posted don't corresponds to the columns too. The only interesting information are: `loadonce: false` and `datatype: "json"`. Additionally one see that you use `gridview: false` what is bad for the performance. – Oleg Mar 15 '12 at 15:12