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_rightis 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});
});
There are some small problems which follow to the problem.
The first problem. You should move the lines where you call
navGridandgridResizeinside ofsuccesshandler. 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 callednavGridwith any additional option. So theposition: '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'optionIn the case one will receive the demo:
or you can remove fix height of the pager with the code
see another demo:
One more option is just remove
recordpos: 'left'option and receive the standard navigator and pager layout (see here):