jqgrid Toolbar how to search/sort on custom formatted column with search toolbar

Question

EDIT : I found out how, answer's below

I tried looking at other questions but can't figure how to solve my problem.

I load jqGrid with json datas. Here is an example of the json file :

{"statut" : "Inactive","name" : [{"LinkType":"user", "LinkText":"DINGO", "LinkSrc":"9443"}], "bands":""},
{"statut" : "Active","name" : [{"LinkType":"user", "LinkText":"BONNIE", "LinkSrc":"8591"}],"bands" : [{"LinkType":"band", "LinkText":"PARADE","LinkSrc":"PARADE"},{"LinkType":"band", "LinkText":"GLORIA KILLS", "LinkSrc":"gloria kills"}]}
...

On the jqGrid, the settings are these ones :

$("#table").jqGrid({
        datatype: 'json',
        url : 'json.php',
        regional: 'fr',
        filtering: true,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 15,
        pageButtonCount: 5,
        ignoreCase: true,
        height: '100%',
        loadonce: true,
        gridview: true,
        colModel: [
            {name: 'statut', label : 'Statut', width:100, align: 'center', stype:'select', searchoptions:{value:':All;Inactive:Inactive;Active:Active'}},
            {name: 'name', label : 'Name', formatter: MyLinkFormater, unformat: MyLinkUnformater},
            {name: 'bands', label : 'Bands', formatter: MyLinkFormater, unformat: MyLinkUnformater}
        ],
        pager: '#pager',
        rowList:[10,20,30,40,50,100,200,300,400,500,1000,5000],
    });
    jQuery("#table").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

And here are the functions :

     function MyLinkFormater(cellvalue, options, rowObject) {
        var i, res = "", linkInfo, preLink;
    
        if (cellvalue == null || !$.isArray(cellvalue)) {
            return " "; // empty cell in case or error
        }
    
        for (i = 0; i < cellvalue.length; i++) {
            linkInfo = cellvalue[i];
            
            if(linkInfo.LinkType == 'band') {
                preLink = '?page=showBand&band=';
            }
            if(linkInfo.LinkType == 'user') {
                preLink = '?page=showUser&e=1&id=';
            }
            res += (res.length > 0 ? ", " : "") +
                '<a href="' + preLink + linkInfo.LinkSrc + '" >' + linkInfo.LinkText + '</a>';
        }
    
        return res;
    }
    function MyLinkUnformater(cellvalue, options, cell) {
        return $('a', cell).text();
    }

Everything works fine except searching/sorting the Name or Bands column. I can't figure what I should do. Do I have to use beforeSearch and if yes, what should I do ?

Any help welcome, this is driving me crazy.

Answer 1

Ok I finally found out.

The searching problem

using this question I've added my functions to filter the formatters

function setFilterFormatters(formatters)
    {
        function columnUsesCustomFormatter(column_name)
        {
            for (var col in formatters)
            {
                if (col == column_name)
                return true;
            }
            return false;
        }
    
        var accessor_regex = /jQuery\.jgrid\.getAccessor\(this\,'(.+)'\)/;
    
        var oldFrom = $.jgrid.from;
        $.jgrid.from = function(source, initialQuery) {
            var result = oldFrom(source, initialQuery);
            result._getStr = function(s) {
                var column_formatter = 'String';
    
                var column_match = s.match(accessor_regex, '$1');
                if (column_match && columnUsesCustomFormatter(column_match[1]))
                {
                    column_formatter = formatters[column_match[1]];
                }
    
                var phrase=[];
                if(this._trim) {
                    phrase.push("jQuery.trim(");
                }
                phrase.push(column_formatter+"("+s+")");
                if(this._trim) {
                    phrase.push(")");
                }
                if(!this._usecase) {
                    phrase.push(".toLowerCase()");
                }
                return phrase.join("");
            }
    
            return result;
        };
    }
    setFilterFormatters({'name':'my_formatter','bands':'my_formatter'});

And the my_formatter function

function my_formatter(cellValue) 
{ 
    var i, res = "", linkInfo;
    if(cellValue==null || !$.isArray(cellValue)) {
        res += ' ';
    } else {
        for (i = 0; i < cellValue.length; i++) {
            linkInfo = cellValue[i];
            res +=  linkInfo.LinkText + ' ';
        }
    }
    return $.map(cellValue,function(element) { return res; }).join(', ');
    
}

The sorting problem

And to fix the sorting problem, I used this answer and added the setting sorttype to the concerned columns which return the text only information, ie :

{name: 'name', label : 'Name', index: 'name', formatter: MyLinkFormater, unformat:MyLinkUnformater, sorttype:function(cell, obj){ 
                return cell + '_' +obj.name[0].LinkText; 
            }},