I am trying to call a formatter function from my jqgrid. I put an alert inside my formatter function, but it is not worked. I followed http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter tutorial.
Here is my code:
function jqGridMethod() {
var jsonData = {
"model" : [ {
"name" : "code",
"index" : "code",
"width" : "100",
"sortable" : false,
"editable" : false,
formatter : "showlink",
formatoptions : {
baseLinkUrl : 'javascript:',
showAction : "seasonEdit('",
addParam : "');"
}
}, {
"name" : "name",
"index" : "name",
"width" : 100
},{
"name" : "colorCode",
"index" :"colorCode" ,
"width" : 100,
formatter:colorformatter
},{
"name" : "startDay",
"index" : "startDay",
"width" : 100
}, {
"name" : "startMonth",
"index" : "startMonth",
"width" : 100
},{
"name" : "endDay",
"index" : "endDay",
"width" : 100
},{
"name" : "endMonth",
"index" : "endMonth",
"width" : 100
},{
"name" : "encryption",
"index" : "encryption",
"width" : "100",
"hidden" : true,
} ],
"sort" : {
"sortcount" : "2",
"sortColumn1" : "#jqgh_jqGrid_list_grid_code",
"sortColumn2" : "#jqgh_jqGrid_list_grid_name"
},
"column" : [ "Code", "Name","Color","Start Day","Start Month","End Day","End Month", "Encryption" ],
"url" : {
"serverurl" : "/pms/season/list"
},
};
jqGridData(jsonData);
}
/////////////////////////////////
function colorformatter(cellvalue, options, rowObject)
{
//return '<img src="'+cellvalue+'" />';
alert("cellvalue"+cellvalue);
// format the cellvalue to new format
var myGrid = $('#jqGrid_list_grid'),
selRowId = myGrid.jqGrid ('getGridParam', 'selrow'),
celValue = myGrid.jqGrid ('getCell', selRowId, 'Color');
return cellvalue;
}
Is there any thing wrong with my code? Why don't my alert gets worked?
I checked inside my browser console. No errors shown there, it indicated that my function is called, but that alert and following code not gets worked?
You posted only small part of your code, but one can see many problems inside.
The first one: you should be careful in the type of properties used. For example the value of width property of colModel items should be the number instead of string ("width" : 100 instead of "width" : "100"). More important that the value of formatter property should be the function instead of the string which contains the name of the function. JavaScript parses the JavaScript code and sees all variables defined in the same scope (for example you can define colorformatter function directly inside of the function jqGridMethod) or in the outer scope. If you get the colModel from the server by using Ajax call then you can't specify the function directly because JSON don't support fuction type. In the case you should use jqGrid version 4.7 or higher (I recommend to use free jqGrid 4.9.2). It allows you to define common templates which uses custom formatter and to use string as the value of formatter property. See here for details. Alternatively you can defined custom formatters by setting colorformatter property of $.fn.fmatter object. See the code or another one which defines formatter: "dynamicLink" and formatter: "checkboxFontAwesome4".
The second important problem is understanding the goal of the formatter. The problem is the following. jqGrid needs to fill the content (the body) of the grid. Web browser provides interface to manipulate the content of HTML page dynamically, but it's very important to understand, that modification of one element on the page follow modification of other elements. If you insert a row in the table for example then the position of the rows below and the position of other elements below of the table can be changed. In the same way the CSS style of other elements can be changed too. So the web browser have to recalculate many properties of all existing elements of the page after any modification of HTML page. The process have the name reflow (see here). To improve performance of filling of the large grid jqGrid use the following scenario. It collect the content of all body of the grid as HTML string fragments and then place innerHTML property of <tbody> element of the grid as one operation. It improves the performance of the filling of the large grid dramatically. Now it should be clear that formatter have to return HTML fragment of the cell as string. In the same way you can't use myGrid.jqGrid ('getCell', selRowId, 'Color') to get the value from the grid body because the custom formatter will be called before the body will be filled.
If the custom formatter need to access to the value from another column of the same row then it should use options or rowObject parameters. In case of usage free jqGrid you can remove rowObject parameter because all information which you need is in options already. The rowid of the current filling row are in options.rowId. The values from input data for the current row can be found in options.rowData. To get the value from Color column you can use options.rowData.Color.
If you have to use old versions of jqGrid then you should use rowObject parameter. The format of the data of rowObject object depends on many factors. During the initial filling of the grid the rowObject object contains the data in the same format like input data returned from the server. If you loads the data from the server in the format
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows": [
{"id":"12", "cell":["cell11", "cell12", "cell13"]},
{"id":"34", "cell":["cell21", "cell22", "cell23"]},
...
]
}
then you should use rowObject[i] to access Color column and you have to use i which corresponds the number of the Color column in colModel array. options.pos could be the index which you should use instead of i, but the value can distinguish on 1 till 3 depends whether you use or not the options multiselect: true, subGrid: true or rownumbers: true.
If you use another format of input data
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows": [
{"id":"12", "colName1":"cell11", "Color":"cell12", ...},
{"id":"34", "colName1":"cell21", "Color":"cell22", ...},
...
]
}
then rowObject.Color will get you required data.
In case of usage the first (array) format of input data and using loadonce: true additionally you will have more complex situation. During initial loading of data you will have to use rowObject[2] to access Color, but during later filling of the grid the format of rowObject will be changed and you will have to use rowObject.Color instead. So you will have to test whether rowObject is array or not and to use the corresponding format. The usage of rowObject.Color || rowObject[2] can have you good results.
I described the format of rowObject detailed so that you understand the benefit of using free jqGrid 4.9.2 which simplify the code. You can just use options.rowData.Color to access the Color independent from the format of input data and independent from the usage of loadonce: true option.