Get External Data into custom jqGrid formatter function

I am using a custom formatter function in jqGrid to populate a "download" cell with a download icon that is linked. I had it working with all of my code inline, but I just moved all JS code to a custom object to package it up and namespace it. Now, when I the custom formatter function is called, the "this" reference changes to the jqgrid table and it cannot find the icons object that is constructed prior to the grid construction.

All of this makes sense, and I am left wondering how I can reference the icons object that is part of the wrapping custom object. Here is the relevant code:

//loop over the json and build the colmodel, call custom formatter
jQuery.each(jsonObj, function() {
            var sdFields = this.supplementalData.fields.field;
            len = sdFields.length;
            for(var i=0; i<len; i++) {
                if(sdFields[i].display) {
                  var currOption = {};
                  currOption.name = sdFields[i].id;
                  currOption.index = sdFields[i].id;

                  if(sdFields[i].displayType == 'icon') {
                    currOption.formatter = this.resultsGridFormatter;
                  } else if(sdFields[i].dataType == 'date') {
                    //currOption.datefmt = 'mm/dd/YYYY';
                    currOption.formatter = 'date';
                    currOption.formatoptions = {
                      srcformat: 'Y-m-d',
                      newformat: 'm/d/Y'
                    };
                  }
                  currOption.jsonmap = sdFields[i].id;
                  currOption.width = sdFields[i].width;
                  currOption.align = sdFields[i].align;
                  currOption.sorttype = sdFields[i].dataType;
                  currOption.sortable = sdFields[i].sortable;
                  currOption.resizable = sdFields[i].resizeable;
                  colModel[i] = currOption;
                }
            }
});

//loop over jsonObj and build the icons object (assoc. array)
this.setIcons = function( jsonObj ) {
  var iconsObj = {};
  jQuery.each(jsonObj, function() {
    var sdIcons = this.supplementalData.icons.icon;
    var len = sdIcons.length;
    for(var i=0; i<len; i++) {
      iconsObj[sdIcons[i].id] = sdIcons[i].file;
    }
  });
  this.icons = iconsObj;
};

//custom formatter that formats icon cells by referencing the icons created above
this.resultsGridFormatter = function(cellvalue, options, rowObject) {
    console.log(this);
    var icons = this.getIcons();
    v开发者_Go百科ar cellVal = "";
    var cssclass = "icon_"+options.colModel.name;
    if(cellvalue != null) {
            if(cellvalue.indexOf("://") != -1) {
                    //it is a URL, so link create the icon and link it
                    cellVal += "<a href='"+cellvalue+"' target='_blank'><img src='"+icons[options.colModel.name]+"' class='"+cssclass+"' /></a>";
            }else{
                    //it is an id, so link to the details modal
                    cellVal += "<img src='"+icons[options.colModel.name]+"' id='"+cellvalue+"' class='"+cssclass+"' />";
            }
    } else {
            cellVal += "&nbsp;";
    }
    //console.log(cellvalue);
    //console.log(options);
    //console.log(rowObject);
    return cellVal;
};

My console.log statement in the custom formatter outputs the jqgrid table, hence the "this.getIcons()" call fails, as there is no such method.

Is there anyway I can reference the icons within the custom formatter? Will I have to somehow wrap the function to include it or take some other approach?

The custom formatter function will be called per call where the first parameter (new this value) is the grid (see source code). You describe the fact also in your question.

You can easy fix your code if you cache this value which you need and use it inside of your custom formatter resultsGridFormatter. I mean, that you can change the code to about following

var ts = this;
//custom formatter that formats icon cells by referencing the icons created above
this.resultsGridFormatter = function(cellvalue, options, rowObject) {
    console.log(this);
    console.log(ts);
    var icons = ts.getIcons();
    var cellVal = "";
    // all your other previous code 
    return cellVal;
};