jqgrid sorting not proper

Question

13  1.1.16  Failed   
14  1.1.17  Failed
15  1.1.18  Failed
16  1.1.19  Passed   
2   1.1.2   Failed   
17  1.1.20  Failed
18  1.1.21  Passed   
19  1.1.22  Passed

I have 2 queries.

1. I have sorting problem in above jqgrid table. While I sort the 3rd column which is a text, it's not sorting properly. the sort is based on the 2nd field which is also not proper.

2. How to change the color if the value is "Failed".

$("#grid").jqGrid({
    datastr: mydata,
    datatype: 'jsonstring',
    width: 800,
    colNames:['Slno','Item','Result', 'Desc'],
    colModel:[
    {name:'slno', index:'slno', key: true, width:50, sorttype: 'int'},
    {name:'item', index:'item', width:50, sortable: false},
    {name:'result', index:'item', width:30, sorttype: 'text'},
    {name:'desc', index:'desc', width:100}
    ],
    pager: '#pager',
    viewrecords: true,
    sortorder: "asc",
    caption:"jqGrid Example",
    jsonReader: {
        root: "rows",
        repeatitems: false,
        id: "0"
    },
    rowNum: 30
});

To fix sorting you need either remove `index:'item'` from the definition of `'result'` or change it to `index:'result'`. I recommend you remove all `index` properties. To set color of 'Failed' cell you can use `cellattr` (see [the answer](http://stackoverflow.com/a/6048865/315935)) or use `rowattr` to set color of the whole row (see [the answer](http://stackoverflow.com/a/10531680/315935)) — Oleg, Mar 22 '13 at 05:52

score 2 · Answer 1 · edited May 23 '17 at 12:04

2

You have wrong index for result

change

 {name:'result', index:'item', width:30, sorttype: 'text'},

to

 {name:'result', index:'result', width:30, sorttype: 'text'},

Then to change color See this answer

Or you can also use formatter like given below

 {name:'result', index:'result', width:30, sorttype: 'text',formatter:passedOrFailedFormatter},


    function passedOrFailedFormatter(cellvalue, options, rowObject) {

        if (cellvalue=="Passed") {
            return "<font color=#008000> "+ cellvalue +" </font>";
        } else {
            return "<font color=#FF0000> "+ cellvalue +" </font>";
        }

    }

edited May 23 '17 at 12:04

Community

1
1

answered Mar 22 '13 at 04:58

Kris

1,882
1
20
23

The idea of the answer is correct. Usage of wrong `index` is the main problem. On the other side I would don't recommend ever use [](http://www.w3schools.com/tags/tag_font.asp) which is deprecated in HTML 4.01 and is not included in HTML5. Instead of that one can use CSS style `color` assigned directly to the cell (``). `style` is attribute of cell and can be used with every formatter. So it's better to use `rowattr` (see [here](http://stackoverflow.com/a/10531680/315935)) instead of custom formatter. In the way one could use `formatter: "data"` for example and do change the color. – Oleg Mar 24 '13 at 12:20
@Oleg thanks for the suggestion on tag and also usage of rowattr – Kris Mar 25 '13 at 03:41

Sharun · Answer 2 · 2013-03-22T05:03:04.227

Answer for your second question.(Assuming that you need to change the color of the row)

$("#grid").jqGrid({
    datastr: mydata,
    datatype: 'jsonstring',
    width: 800,
    colNames:['Slno','Item','Result', 'Desc'],
    colModel:[
    {name:'slno', index:'slno', key: true, width:50, sorttype: 'int'},
    {name:'item', index:'item', width:50, sortable: false},
    {name:'result', index:'result', width:30, sorttype: 'text'},
    {name:'desc', index:'desc', width:100}
    ],
    pager: '#pager',
    viewrecords: true,
    sortorder: "asc",
    caption:"jqGrid Example",
    jsonReader: {
        root: "rows",
        repeatitems: false,
        id: "0"
    },

afterInsertRow: function ( rowid, rowdata )
                    {
                        if ( ( rowdata.result) == 'Failed' )
                        {
                            $( this ).jqGrid( 'setRowData', rowid, false, { background: '#EBADAD'} );//
                        },
    rowNum: 30
});

And if you need to change the color only for that particular cell, replace with this:

afterInsertRow: function ( rowid, rowdata )
                        {
                            if ( ( rowdata.result) == 'Failed' )
                            {
                               $(this).jqGrid('setCell', rowid, "result", "", { 'background-color': '#EBADAD'
                            });
                            },
        rowNum: 30
    });

jqgrid sorting not proper

2 Answers2