Question

var jqGridModel = [
            { name: 'month', index: 'Month', width: 120, sorttype: "String", hidden: true }, //hidden column
            {name: 'monthID', index: 'MonthID', width: 120, sorttype: "int", formatter: convertToMonthName },
            { name: 'amount', type: "Decimal", index: 'amount', width: 120, sorttype: "float", formatter: 'currency', formatoptions: { decimalSeparator: fmtr[0], thousandsSeparator: fmtr[1], decimalPlaces: 2, suffix: fmtr[3], prefix: fmtr[2]} },
            ];

fmtr is a custom method which I have defined to handle multiple currency.

On the above grid, I want to have an image inside the amount column next to the amount value. On click of this image, it will take you to another page which will show details(break up) of the amount.

Since I have already used ‘currency’ formatter, I am not sure if I can use a custom formatter on that column. what are the options to achieve that.

I thought of adding the image to the suffix like this:

// suffix: fmtr[3] + "<img src='../Content/img/show-detail-icon.png'/> onclick='showDetails'"

But in this case, I do not know how to pass the monthID to the onclick function.

Answer 1

You can call the currency formatter from a custom formatter function – see this answer for an example. The nice thing about using the formatter is that you have access to the cell value as well as the row object (for other cell values in the same row). That way you can pass any ID’s you need to the onclick handler.