jqGrid - How to supply multiple pre-defined formatters via custom formatter

Question

I've got a situation in which I'm using a formatter: 'select' for one of my colModels. For example:

{ key: false, name: 'Col5Id', index: 'Col5Id', editable: true, width: 140, edittype: 'select', editoptions: { value: getKeyValuePairsForDisplay('/Controller/Action', 'Id', 'Name') }, formatter: 'select' },

And this works fine but I also need to turn that value into a hyperlink (which is typically done by formatter: 'showlink' but I can't use it because jqGrid only accepts a single formatter). The workaround from my research is to use a custom formatter and accomplish this.

From this question it seems that a custom formatter can call "multiple formatters depending upon the value of the underlying data". How would one go about doing that?

I'd appreciate any help, thanks!

could you include **examples of input data for the column and the examples of results of formatting** which you need to get. It could be important to know which version of jqGrid you use. `formatter: "showlink"` have for example in free jqGrid 4.8 (which I published recently [here](https://github.com/free-jqgrid/jqGrid) and [here](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)) much more possibilities. See [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/improvement-of-formatter:-%22showlink%22). — Oleg, Mar 12 '15 at 08:20
@Oleg Thanks for the reply Oleg. I'm using jqGrid 4.6 btw. I've posted my answer below - one of your older replies on a different question helped me out too. — RizJa, Mar 12 '15 at 14:43

score 0 · Accepted Answer · edited May 23 '17 at 12:22

Got it!

There's a couple of ways that it could be done.

First, I changed the colModel to:

{ key: false, name: 'Col5Id', index: 'Col5Id', editable: true, width: 140, edittype: 'select', editoptions: { value: getKeyValuePairsForDisplay('/Controller/Action', 'Id', 'Name') }, formatter: myFormatter },

Then, I built myFormatter as:

function myFormatter(cell, options, row) { 
    //Method 1 - Manually specify URL (worked better in my case)
    var selectValue = $.fn.fmatter.select(cell, options, row);
    return "<a href='/Controller/Action' title='View' id='viewId'>" + selectValue + "</a>";

    //Method 2 - Pass the formatted value from the select formatting into the showlink function
    return $.fn.fmatter.showlink(($.fn.fmatter.select(cell, options, row), options);
}

Also stumbled across this answer by Oleg which specifies another way to accomplish the task.

Hopefully someone else benefits from this! Cheers!

jqGrid - How to supply multiple pre-defined formatters via custom formatter

1 Answers1