jqgrid: unformat is not called while sorting

Question

As per the jqGrid documentation, if you provide a custom formatter in colOptions, you should also provide an 'unformat' key, which gets called during sort operation. However, I don't see this happening ie, the unformat function doesn't get called. Here is an extremely simple example:

As you can see, the console.log line in the unformat_salary function never gets called. Even when you click on the Salary header to sort it. The sort seems to work but it's sorted lexically and I want a custom sort. Providing 'sorttype' as a function would do what I want but I'm wondering why unformat is not getting called when the Documentation specifically says it gets called during sort operations.

JQGRID Test

    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <style type="text/css" media="screen">
        th.ui-th-column div{
            white-space:normal !important;
            height:auto !important;
            padding:2px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            createGrid();
        });
        function createGrid() {
            $("#jqgrid-table").jqGrid({
                colNames:['First<br/>Name', 'Last Name', 'Age', 'Salary', 'Type'],
                colModel:[
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'age', index:'age', width:50},
                    {name:'salary', index: 'salary', width:50, sortable:true, formatter: salary_formatter, unformat:unformat_salary},
                    {name:'type', index:'type', width: 56}
                ],
                width: 800,
                datatype:'local',                   
                pager: '#pager2',
                viewrecords: true,
                caption:"JSON Example"
            });
            var searchOptions = {
                caption: 'Filter...',
                multipleSearch:true,
                closeAfterSearch:true,
                closeAfterReset:true,
                Find: 'Filter'
            };                
            jQuery("#jqgrid-table").jqGrid('navGrid',
                                    '#pager2', 
                                    {search:true, edit:false, add:false, del:false, refresh:false}, 
                                    null, null, null, searchOptions
                                    );
            var data = getData();
            for(var i =0; i < data.length; i++) {
                var r = data[i];
                jQuery("#jqgrid-table").addRowData(r.id, r);
            }
        }

        function getData() {
            return [
                   {id:1, firstName: 'John', lastName: 'XXX',  age:'30',  salary:'1500', type: 'Nice'},
                   {id:2, firstName: 'Ashley', lastName:'YYY', age:'31',  salary:'1300', type:'Nicer'},
                   {id:3, firstName:'Smith', lastName:'ZZZ', age:'23',    salary:'1301', type:'Nicest'},
                   {id:4, firstName:'Sarah', lastName:'Aster', age:'45',  salary:'530',  type:'Nicest'},
                   {id:5, firstName:'Michelle', lastName:'Crazy', age:'30', salary:'1423', type:'Nicest'}
            ];
        }

        function salary_formatter(cellvalue) {
            return cellvalue.replace(/^(\d\d)/,'$1,');
        }

        function unformat_salary(cellvalue) {
            console.log('U : ' + cellvalue); // THIS DOES NOT GET CALLED !
            return Number(cellvalue.replace(/,/g,''));
        }
    </script>
    </head>
    <body>
      <div id='jqgrid-div'>
          <table id='jqgrid-table'></table>
         <div id="pager2"></div>
      </div>
    </body>
    </html>

score 0 · Answer 1 · edited May 23 '17 at 10:34

You misunderstand the meaning of unformat function. It will be soleved only if you get the contain of the cells, rows or columns. For example if you use getCell, getRowData, getCol or close jqGrid methods. If you use datatype:'local' (like in your example) the sorttype property define how the column will be sorted. In case of custom sorting you can use sorttype as function. The function can has two parameters: cellValue and rowData. The last parameter represent the non-formatted data from the current row.

In your case the you can use

sorttype:function(cellvalue){
    return unformat_salary(cellvalue);
}

jqgrid: unformat is not called while sorting

1 Answers1