jqGrid formatter and sortable column - doesn't sort

Question

I am using a custom formatter for my jqGrid columnModel and I can't get sorting to work with formatter functions. If I remove formatter column sorts normally.

jQuery("#listAgentOptions").jqGrid({
    height: 240,
    datatype: "local",
    colNames: [' ', 'First Name', 'Last Name', 'Role'],
    colModel: [
    { name: 'status', index: 'status', width: 18, sorttype: 'text', align: 'center', formatter: function(cellvalue, options, rowObject) {
        return cellvalue == 1 ? "<img src='images/agent_green_s.png' alt='Ready' title='Ready' />" :
        cellvalue == 3 ? "<img src='images/agent_red_s.png' alt='Busy' title='Busy' />" :
        "<img src='images/agent_orange_s.png' alt='Pending Ready' title='Pending Ready' />";
    },
        unformat:
    function(cellvalue, options, rowObject) { return Math.floor(Math.random() + 0.1).toString(); }
    },
    { name: 'firstName', index: 'firstName', width: 92 },
    { name: 'lastName', index: 'lastName', width: 142 },
    { name: 'role', index: 'role', sorttype: 'int', width: 36, align: 'center', formatter: function(cellvalue, options, rowObject) {
        return cellvalue == true ? "<img src='images/user_gray.png' alt='Supervisor' title='Supervisor' />" : "<img src='images/user.png' alt='Agent' title='Agent' />";
    }, unformat:
    function(cellvalue, options, rowObject) { return cellvalue; }
    }
    ],
    sortname: 'lastName'
});

Rows are added like this:

jQuery("#listAgentOptions").jqGrid('clearGridData');
$.each(result, function(i, item) {
    if (item.ContactType == 1) {
        jQuery("#listAgentOptions").jqGrid('addRowData', i+1, { firstName: item.ContactName.split(" ")[0], lastName: item.ContactName.split(" ")[1],
        role: item.IsSupervisor,
        status: item.Status == "Ready" ? 1 : item.Status == "Busy" ? 3 : 2
        });
    }
});

How do I get sorting to work properly?

Update. I have just downloaded the latest version of jqGrid - same issue.

I have also tried using unformat: function(cellvalue, options, rowObject) { } but cellvalue is empty there :-E When I use return Math.floor(Math.random() + 0.1).toString(); it does sort things randomly (each time I click), but return cellvalue; just returns an empty string.

Answer 1

Try to debug using Firebug and check what the server is receiving. Use sortable: true.

By the way, the sorttype parameter works only locally (datatype: local).

Answer 2

Internally, jqGrid uses unformat to get the value of the cell:

        $.each(ts.rows, function(index, row) {
            try { sv = $.unformat($(row).children('td').eq(col),{rowId:row.id, colModel:ts.p.colModel[col]},col,true);}
            catch (_) { sv = $(row).children('td').eq(col).text(); }
            row.sortKey = findSortKey(sv);
            rows[index] = this;
        });

A cell value is then parsed using the handler for the column's sorttype, in the case of int:

            findSortKey = function($cell) {
                return IntNum($cell.replace(stripNum, ''),0);
            };

So basically, if your unformat function returns the correct integer for each cell, I would expect column sorting to work as well. If you are still having problems, please post your full code, including the contents of unformat.

Answer 3

It can be your problem is not where you are searching for.

What kind of data holding you use in the jqGrid? I mean the value of parameter datatype. If you load the jqGrid data from server, server receive the sorting information from the client and server must give sorted data back. Formatter used only to display data how you prefer. Client-side sorting work for example with datatype: 'xmlstring' and datatype: "clientSide", but not with dataType:"xml" or dataType:"json" and dataType:"jsonp". Parameters like sorttype works only with client-side sorting and will be ignored with server-side sorting. The main role: if you have to define url parameter of jqGrid, use use server-side sorting.

Answer 4

OK, I have figured out what's going on.

First of all you have to use unformat to pass the initial value back to jqGrid sort function.

jqGrid is passing $(row).text() to unformat function, which for cells with just an html tag returns an empty string, and there is no option to change it. However, what you can do is use the third parameter of unformat function, which in my case is rowObject. You can then retrieve the actual cell value by using $(rowObject).html() and parse it back to the value. Sorting will now work.

Another thing to remember is that if you are using sorrtype: 'int' you will have to return integer as a string, like return '1';.