jqgrid formatter ajax,jqgrid setting custom formatter to dynamic column collection

I am using jqgrid. We are building a dashboard functionality with jquery. Different application just have to register respective application page and dashboard will render that page.To achieve this we are using jqgrid as one of the jquery plugin. Following is my code

var ph = '#' + placeHolder;

var _prevSort;

$.ajax({

url: dataUrl,

dataType: "json",

async: true,

success: function(json) {

pager = $('#' + pager);

if (json.showPager === "false") {

pager = eval(json.showPager);

}

dataUrl += "&jqSession=true";

$(ph).jqGrid({

url: dataUrl,

datatype: "json",

sortclass: "grid_sort",

colNames: JSON.parse(json.colNames),

colModel: JSON.parse(json.colModel),

forceFit: true,

rowNum: json.rowNum,

rowList: JSON.parse(json.rowList),

pager: pager,

sortname: json.sortName,

caption: json.caption,

viewrecords: true,

viewsortcols: true,

sortorder: json.sortOrder,

footerrow: summaryFooter,

userDataOnFooter: summaryFooter,

jsonReader: {

root: "rows",

row: "row",

repeatitems: false,

id: json.sortName

},

gridComplete: function() {

if (showFooter) {

$(ph).append("

" + json.footerRow + "");

}

if (json.additionalContent != null) {

$("#" + xContID).html(json.additionalContent);

}

$("ui-icon-asc").append("IMG");

var _rows = $(".jqgrow");

if (json.rows.length > 0) {

for (var i = 1; i < _rows.length; i += 1) {

_rows[i].attributes["class"].value = _rows[i].attributes["class"].value.replace(" ui-jqgrid-altrow", "");

if (i % 2 == 1) {

_rows[i].attributes["class"].value += " ui-jqgrid-altrow";

}

}

var gMaxHeight = getGridMaxHeight();

var gHeight = ($(ph + " tr").length + 1) * ($($(".jqgrow") [0]).height());

if (gHeight <= gMaxHeight) {

$(ph).parent().height(gHeight);

}

else {

$(ph).parent().height(gMaxHeight);

}

}

else {

$(ph).prepend("

" + gridNoDataMsg + "");

$(ph).parent().height(60);

}

},

onSortCol: function(index, iCol, sortorder) {

dataUrl = dataUrl.replace("&jqSession=true", "");

$(ph).jqGrid().setGridParam({ url: dataUrl }).trigger("reloadGrid");

var _colName = "#jqgh_" + index;

// $(_prevSort).parent().removeClass("ui-jqgrid-sorted");

// $(_prevSort).parent().addClass("ui-state-default");

// $(_colName).parent().addClass("ui-jqgrid-sorted");

// $(_colName).parent().removeClass("ui-state-default");

_prevSort = _colName;

var _rows = $(".jqgrow");

for (var i = 1; i < _rows.length; i += 1) {

_rows[i].attributes["class"].value = _rows[i].attributes["class"].value.replace(" ui-jqgrid-altrow", "");

if (i % 2 == 1) {

_rows[i].attributes["class"].value += " ui-jqgrid-altrow";

}

}

}

}).navGrid('#' + pager, { search: false, sort: false, edit: false, add: false, del: false, refresh: false }); // end of grid

$("#" + loadid).empty();

gGridIds[gGridIds.length] = placeHolder;

SetGridSizes();

},

error: function() {

$("#" + loadid).html(loadingErr);

}

});

As you can see from the code i am getting column collection dynamically(Appication page which i am calling will give me JSON in the response and will have colNames collection in it. Evrything is working fine but, only issue is coming when we are trying to apply custom formatter to column. This issue comes only when we are dynamically assign "colModel" to jqgrid.

Appreciate help

Thanks in advance