How to add a custom mask in JQGrid columns

Question

How can I add a custom mask in a JQGrid column? I followed the documentation, but it doesn't work.

Below my code:

this.montarGRID = function (p_gridName, p_dados, p_header, p_descriptor, p_contentName, p_primaryKey, p_filtroGrid) {
jQuery("#" + p_gridName).jqGrid( {
    data : p_dados, 
    datatype : "local", 
    sortable : true, 
    colNames : p_header, 
    colModel : p_descriptor, 
    rowNum : 30, 
    rowList : [30, 50, 100], 
    pager : '#p' + p_gridName, 
    recordpos : 'right', 
    viewrecords : true, 
    sortorder : "desc", 
    width: screen.availWidth - (screen.availWidth * 3 / 100),
    height : screen.availHeight - 250, 
    ignoreCase : true, 
    multiselect : false, 
    shrinkToFit : false, ...


function telefone(cellValue, opts, rowObject) {
    console.log("gri.locale-pt-br.js formatter telefone " + cellValue);
    return "Telefone: " + cellValue;
}

My colModel value...

[
{formatter=integer, index=id, hidden=true, sortable=true, sorttype=integer, width=75, align=center, name=id}, 
{formatter=integer, index=VPD_GEMPI, search=false, hidden=true, sorttype=integer, sortable=true, width=0, align=right, name=VPD_GEMPI, editrules={number=true, required=true}, editable=true}, 
{formatter=date, formatoptions={srcformat=ISO8601Short, newformat=d/m/Y}, index=DT_DIGIT, search=true, hidden=false, sortable=true, width=0, align=right, name=DT_DIGIT, dateFormat=d/m/Y, editrules={required=true, date=true}, editable=true}, 
{formatter=email, index=EMAIL, search=true, hidden=false, sorttype=text, sortable=true, width=0, align=right, name=EMAIL, editrules={text=true, required=false}, editable=true}, 
{formatter=telefone, index=TELCONTATO01, search=true, hidden=false, sorttype=text, sortable=true, width=0, align=right, name=TELCONTATO01, editrules={text=true, required=false}, editable=true}, 
{formatter=function (cellValue, opts, rowObject) { return telefone(cellValue, opts, rowObject); }, index=TELCONTATO02, search=true, hidden=false, sorttype=text, sortable=true, width=0, align=right, name=TELCONTATO02, editrules={text=true, required=false}, editable=true} 
]

Only integer, date, email masks work.

When my colModel formatter property is integer, currency, email, etc. it works, but when is telefone it doesn't.

Below my template formatter

;(function ($) {
    $.extend($.jgrid, {
        formatter :  {
        integer :  {
            thousandsSeparator : " ", 
            defaultValue : '0'
        },
        number :  {
            decimalSeparator : ",", 
            thousandsSeparator : ".", 
            decimalPlaces : 2, 
            defaultValue : '0,00'
        },
        currency :  {
            decimalSeparator : ",", 
            thousandsSeparator : ".", 
            decimalPlaces : 2, 
            prefix : "R$ ", 
            suffix : "", 
            defaultValue : '0,00'
        } ...
})(jQuery);

Answer 1

Looking at your picture in colModel your formatter telefone will never work. As described in the documentation from the link that I posted, the custom formatter should be not enclosed in quotes, but just write it.

You can define your own formatter for a particular column. Usually this is a function. When set in the formatter option this should not be enclosed in quotes and not entered with () - show just the name of the function.

You have

colModel:[
    ....
    {....., foramatter : "telefone",....    }
    ....
 ]

This is wrong: It should be:

colModel:[
    ....
    {....., foramatter : telefone,....    }
    ....
 ]

This is a big difference

UPDATE : If your system can generate only strings, you can easy solve the problem extending the formatter, so that you can put string in formatter property. To solve this you can "register" your custom formatter and unformatter. For example if you want to register formatter: "telefone" you need to define $.fn.fmatter.telefone as formatter function and eventually $.fn.fmatter.telefone.unformat as unformatter function like this:

$.extend($.fn.fmatter, {
    telefone: function (cellValue, options, rowObject) { 
        // your code here
        ...
        // return a string 
    }
});
$.extend($.fn.fmatter.telefone, {
    unformat: function (cellValue, options, elem) {
        // code for unformatter
        ...
    }
});

Hope this help.