jqgrid - icons not displaying - version issue?

Question

I was earlier using the following versions:

Jquery - 1.4.3
jqGrid - 4.1.2

Now I'm using the following versions:

Jquery - 1.6.4
jqGrid - 4.3.1

Using the latest versions, I've noticed the following:

the columns sorting icons of jqgrid are not displayed by default. They show up only when the column header is clicked on.
the jqgrid pagination cell pager_right is empty. It should display the icons for reload and search
the jqgrid resize handles do not show up. I'm using

$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});

I compared the following multiples times but everything seems to be the same

CSS
jqgrid definition

Has anybody else experienced this? Or am I missing something?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery Grid</title>
        <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
        <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
        <script src="js/jquery.layout.js" type="text/javascript"></script>
        <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>  
        <script src="plugins/ui.multiselect.js" type="text/javascript"></script>
        <script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
        <script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="content">
            <div class="userinfo">
                <table id="myjqgrid"></table>
                <div id="Pager"></div>                  
                <script src="js/myjqgrid.js" type="text/javascript"></script>                   
            </div>
        </div>
    </body>
</html>

JSON

{
    "colModel": [
        {
            "name": "ID",
            "label": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value",
            "sortable": true      
        },
        {
            "name": "FirstName",
            "label": "FirstName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.1.value",
            "sortable": false       
        },
        {
            "name": "LastName",
            "label": "LastName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.2.value",
            "sortable": false       
        }
    ],
    "colNames": [
        "ID",
        "FirstName",
        "LastName"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345",
                                "label": "ID"                       
                            },
                            {
                                "value":"David",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Smith",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"2",
                        "cells":
                        [               
                            {
                                "value":"37546",
                                "label": "ID"                       
                            },
                            {
                                "value":"Willy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Peacock",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"3",
                        "cells":
                        [               
                            {
                                "value":"62345",
                                "label": "ID"                       
                            },
                            {
                                "value":"Kim",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Holmes",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"4",
                        "cells":
                        [               
                            {
                                "value":"186034",
                                "label": "ID"                       
                            },
                            {
                                "value":"Andy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Wills",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

JQGrid Definition (myjquery.js)

$(document).ready(function () { 
    $.ajax({
        type: "GET",
        url: "myjqgrid.json",
        data: "",
        dataType: "json",
        success: function(response){
            var columnData = response.mypage.outerwrapper,
                columnNames = response.colNames,
                columnModel = response.colModel;

            $("#myjqgrid").jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,                
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: "innerwrapper.rows",              
                    repeatitems: false
                },
                gridview: true,
                pager: "#Pager",
                rowNum: 2,
                rowList: [2, 4, 6, 8],
                viewrecords: true,              
                recordpos: 'left',
                multiboxonly: true,
                multiselect: true,
                sortname: 'id',
                sortorder: "desc",  
                sorttype: "text",   
                sortable: true,
                caption: "<h2>My JQGrid</h2>",
                width: "1406",      
                height: "100%",
                scrolloffset: 0,    
                loadonce: true,     
                cache: true,
                loadComplete: function(data){

                }
            });
        }
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager');
    $("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
});

Do you tried with jqGrid 4.3.1, but some old version of jQuery (<=1.5.3)? Can you provide the demo which reproduces the problem? — Oleg, Dec 28 '11 at 09:03
@Oleg: Yes, I tried jqGrid 4.3.1 with jQuery 1.4.3 but it still doesn't work. I have posted my html, json and jqgrid definition code. — techlead, Dec 28 '11 at 15:56

score 2 · Answer 1 · answered Dec 30 '14 at 12:00

2

For me it was a case of the .png files not getting picked up. In the jquery-ui.css change your relative reference by putting ../ in the front for example images/xxxxx.png becomes ../images/xxxxxx.png

answered Dec 30 '14 at 12:00

Mike Hart

111
1
2

score 1 · Accepted Answer · answered Dec 28 '11 at 21:30

There are some small problems which follow to the problem.

The first problem. You should move the lines where you call navGrid and gridResize inside of success handler. So the navigator and the resizing element of the grid will be created after ther grid will be created.

You uses recordpos: 'left' which place the text like "View 1-2 of 4" which are typically of the right part of the pager on the left part. Then you called navGrid with any additional option. So the position: 'left' will be used per default. If the case the navigator bar will be placed under the text like "View 1-2 of 4" and one will don't see the navigator icons.

You can fix the problem in two ways. Either you can use position: 'right' option

$("#myjqgrid").jqGrid('navGrid','#Pager', {position: 'right'});

In the case one will receive the demo:

enter image description here

or you can remove fix height of the pager with the code

$('#Pager').css("height", "auto");

see another demo:

enter image description here

One more option is just remove recordpos: 'left' option and receive the standard navigator and pager layout (see here):

enter image description here

... and the sort icons in the column headers... why are they not showing up? — techlead, Dec 28 '11 at 21:47
@SK11: Because you use `sortname: 'id'` and have no column with the name `'id'`. If you would change the parameter to `sortname: 'ID'` you will immediately see the sort icons over the 'ID' column. — Oleg, Dec 29 '11 at 07:22
jqgrid reload is not working. http://stackoverflow.com/questions/8670490/jqgrid-reload-not-working — techlead, Dec 29 '11 at 16:33

jqgrid - icons not displaying - version issue?

2 Answers2